Android浏览器使用较大的边框错误地渲染边框半径

Question

我在Android Webkit浏览器上遇到了问题。这发生在Android 4.0.3及更早版本上。该设计要求在div中使用15像素的顶部边框，然后使用圆角。我使用border-radius来实现这一点，这在所有现代浏览器中都能正常工作，但在Android上看起来像这样：

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%;
}

在Mac OS，Apple的Webkit和Androi Chrome上的Chrome上，它看起来像这样：

我很好奇其他人是否曾见过这个。我已经使用了没有效果的webkit前缀，正如我所期望的那样。

Answer 1

android的px可能会有所不同，因为显示器不同，因此使用独立于设备的测量将有助于保持一切不变。 Em是一种保持常量的简单方法，因为它们相对于默认字体大小（通常为16px）。虽然使用css为所有浏览器提供相同的起点，但可以修改默认的字体大小。