android - 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 上的 Chrome、Apple 的 Webkit 和 Androi Chrome 上，它看起来像这样：

我很好奇是否有其他人以前看过这个。正如我所料，我使用了没有效果的 webkit 前缀。

Answer 1

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