Android浏览器渲染边界半径正确较大的边界 [英] Android Browser Rendering border radius incorrectly with larger border

问题描述

我运行到对Android WebKit浏览器有问题。这是发生在Android 4.0.3及更早版本。设计要求一个div内的15像素顶部边框，然后圆角。我使用边框半径做到这一点，并能正常工作在所有的现代浏览器，但在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如下：

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

在Chrome上的Mac OS，苹果的WebKit和Androi铬它看起来是这样的：

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

我很好奇是否有人见过这个。我已经使用它并没有产生作用，因为我本来期望WebKit的preFIX。

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的是一个简单的方法来保持不变的东西，因为它们是相对于默认字体大小，通常是16像素。默认字体大小虽然可以使用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浏览器渲染边界半径正确较大的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！