Android Browser Rendering边框半径不正确，边框较大 [英] Android Browser Rendering border radius incorrectly with larger border

问题描述

我在Android Webkit浏览器上遇到问题。这是发生在Android 4.0.3和更早。设计要求在div内的15像素顶部边框，然后圆角。我使用border-radius来实现这一点，这在所有现代浏览器都很好，但在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:

HTML看起来像this：

The HTML looks like this:

<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看起来像这样：

The CSS looks like this:

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上， ：

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

我很好奇，如果其他人都看过这个。我使用webkit前缀没有影响，正如我所预期的。

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.

推荐答案

android的px可能不同，因为显示不同，因此使用设备无关的测量将有助于保持一切恒定。 Em是一个简单的方法来保持事物恒定，因为它们相对于默认字体大小，通常是16px。默认的字体大小可以修改虽然使用CSS给所有浏览器相同的起点。

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 Browser Rendering边框半径不正确，边框较大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！