Android浏览器渲染边界半径不正确，边界更大

I'm running into a problem on the Android Webkit browser. This is happening on Android 4.0.3 and earlier. The design calls for a 15 pixel top border within a div and then rounded corners. I am using border-radius to accomplish this and this works fine in all modern browsers but on Android it looks like this:

我在Android Webkit浏览器上遇到了一个问题。这发生在Android 4.0.3和更早的时候。设计要求在div中使用15像素的顶部边框，然后使用圆角。我正在使用border-radius来实现这一点，它在所有现代浏览器中都很好用，但是在Android上看起来是这样的:

The HTML looks like this:

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>

The CSS looks like this:

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

On Chrome on Mac OS, Apple's Webkit, and Androi Chrome it looks like this:

在Mac OS上的Chrome，苹果的Webkit和安卓的Chrome上看起来是这样的:

I'm curious if anyone else has seen this before. I have used the webkit prefix which didn't have an effect, as I would have expected.

我很好奇是否有人见过这个。我使用了webkit前缀，但没有效果，正如我预期的那样。

1 个解决方案

#1

android's px may be different because the display is different, so using device independent measurements will help keep everything constant. Em's are an easy way to keep things constant as they are relative to the default font size, which is usually 16px. The default font-size can be modified though using css giving all browsers the same starting point.

android的px可能会有所不同，因为显示屏不同，所以使用独立于设备的测量将有助于保持一切不变。Em's是一种保持常量的简单方法，因为它与默认字体大小(通常是16px)相关。通过使用css为所有浏览器提供相同的起点，可以修改默认的字体大小。