Браузер Android неправильно отображает радиус границы с большей границей

Я столкнулся с проблемой в браузере Android Webkit. Это происходит на Android 4.0.3 и более ранних версиях. Дизайн требует 15-пиксельной верхней границы внутри div, а затем закругленных углов. Для этого я использую border-radius, и это прекрасно работает во всех современных браузерах, но на Android это выглядит так:

http://i.stack.imgur.com/5oEuD.png

HTML-код выглядит следующим образом:

<section class=" sub_nav" id="quick_access_section">
 <header>
    <h1>Headline</h1>
    </header>
    <div class="wrapper cw_humans">
        ....
        <div class="text">Nam condimentum viverra nulla sed pulvinar nisl posu</div>
        ....
        </div>
    </div>
</section>

CSS выглядит так:

section {
  background: #f2f4f7;
  border-top: 15px solid #1a293a;
  border-radius: 6px;
  -webkit-box-shadow: 0px 5px 10px #bfc4ca;
  -moz-box-shadow: 0px 5px 10px #bfc4ca;
  box-shadow: 0px 5px 10px #bfc4ca;
  margin: 0 auto;
  width: 80%;
}

В Chrome на Mac OS, Apple Webkit и Android Chrome это выглядит так:

http://i.stack.imgur.com/2PoiZ.png

Мне любопытно, видел ли кто-нибудь это раньше. Я использовал префикс webkit, который не дал эффекта, как я и ожидал.


android html css android-browser
person Conner    schedule 18.07.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Android px может отличаться, потому что дисплей отличается, поэтому использование независимых от устройства измерений поможет сохранить все постоянным. Em — это простой способ сохранить постоянство, поскольку они относятся к размеру шрифта по умолчанию, который обычно составляет 16 пикселей. Размер шрифта по умолчанию можно изменить, используя css, предоставляя всем браузерам одинаковую начальную точку.

person Ilan Biala    schedule 20.07.2012
comment
Использование em измерений для радиуса границы на Android вообще не работает. Измерения в px в любом случае интерпретируются как виртуальные пиксели, а не пиксели устройства. - person Pointy; 20.12.2012