当边框半径小于整体边框宽度时，安卓浏览器渲染边框错误。

Question

当边框半径小于整体边框宽度时，安卓浏览器渲染边框错误。

9

现在这是Android的bug 41913。感谢开启这个问题的人！

我认为这与这个旧问题差不多，尽管那里的屏幕截图看起来与我看到的有点不同。

我想要做的是创建一个具有粗顶部边框和圆角的盒子，就像这个JSBIN示例中的那样。在桌面浏览器（支持border-radius的浏览器）以及iOS Safari和带有Chrome的Android上都可以正常工作，但旧版Android浏览器显示如下：

_{(来源：gutfullofbeer.net)}

边框被渲染得超过曲线的更厚部分并没有到达边缘。有人知道是否有方法可以使浏览器正常工作吗？这似乎是一个一贯的错误，至少要追溯到Android 2.3; 屏幕截图来自4.0.3电话。

这里是JSBIN中的HTML：

<body class=single>
  <div class=dialog-bound>
    Hello World
  </div>
</body>

以及CSS（类名从实际项目中提取）：

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound {
  background-color: #FFFCF2/*#mainBackground*/;
  margin: 50px auto;
  max-width: 32em;
  border-width: 28px 0 8px 0;
  border-style: solid;
  border-color: #89BAE2;
  -webkit-border-radius: 10px 10px 5px 5px;
  border-radius: 10px 10px 5px 5px;
  padding: 0 5px 2px 5px;
}

编辑 - 这里有一件值得注意的事情：在我的HTC One X手机上和Nexus 7上，在Chrome和Firefox中以上述CSS代码完美地运行。它也可以在我的Android 2.3下的Atrix上在Firefox中运行。因此，我真的怀疑这不是虚拟像素与实际像素问题，因为所有这些设备上的浏览器都同意视口大小。

- Pointy

3个回答

1

这确实是Android的一个bug http://jsbin.com/uzuril/17，但可以通过伪元素来欺骗它，就像这样 http://jsbin.com/uzuril/15

HTML代码相同，CSS使用LESS编写，测试了在Sony Ericsson Xperia上安装的Android 4.0.3默认浏览器和最新的Chrome移动版浏览器。

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound {
  background-color: #FFFCF2/*#mainBackground*/;
  padding: 2px 5px 4px 5px;
  position: relative;
  margin: 50px auto;
  max-width: 32em;

  &::after,
  &::before {
    border-style: solid;
    border-color: #89BAE2;
    content: '';
    left: 0; right: 0;
    position: absolute;
  }

  &::after {
    border-width: 1.8em 1.8em 0 1.8em;
    top: 2px; margin-top: -1.8em;
    border-radius: .6em .6em 0 0;
  }

  &::before {
    border-width: 0 0.6em 0.6em 0.6em;
    bottom: 2px; margin-bottom: -0.6em;
    border-radius: 0 0 .3em .3em;
  }
}

- dmi3y

是的，那几乎就是我最终所做的。我还不得不使用一些负边距技巧来解决一些填充问题，以及浏览器在添加元素和边框之间留下微弱白线的奇怪倾向，但除此之外它可以正常工作。 - Pointy

是的，在我的情况下，这些间隙只出现在桌面版Chrome中，而Android浏览器一切正常，因此不得不在底部和顶部分别添加2px，并为此添加了加2px的填充来进行补偿。 - dmi3y

我在 Modernizr 中添加了一个浏览器嗅探器，这样我就可以只为原生 Android 浏览器添加规则，因此其他客户端只会得到常规边框。（做浏览器嗅探并不是一件愉快的事情，但这是我选择它的极少数情况之一。） - Pointy

可能特征检测能够更好地运作，但是要找出独特的行为模式确实是一个巨大的挑战，也许已经有人成功做到了。 - dmi3y

是的，特征检测确实更好，但根据我的经验，“错误检测”可能相当困难，尤其是像这样的渲染错误 :-) - Pointy

0

你可以通过设置max-width: 32em;来显示你的属性，所以你应该注意当字体为"Hello World"时，边框会变大，而在字体之前或之后，边框会变小。

实际上，max-width属性是根据字体大小进行调整的。

所以你应该使用Width=%属性来解决这个问题。

- QuokMoon

很抱歉，我不明白你在说什么。无论是否使用max-width属性，问题都与其无关；不正确的渲染发生时，该属性是否存在并不重要。max-width属性与边框宽度无关。 - Pointy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pablo Martinez · Accepted Answer

这是一个与安卓浏览器相关的问题，它绘制了圆角，如果border-width大于半径，则半径区域不会被填充。即使边框宽度小于半径，浏览器也无法正确绘制（可以在http://jsbin.com/uxawuf/1中查看）。

我在安卓的错误跟踪器中没有看到任何相关问题，有一个关于使用边界半径制作阴影的问题，我认为这是相同的问题，也许开一个新问题是个好主意（我正在处理中:P）。

我知道这不算是一个好的回答:P 但是如果你想要这个效果，你可以添加两个div，一个用于上边框，另一个用于下边框，并通过半径和背景来实现效果: ( 这里是示例: http://jsbin.com/exexol/9 )

<body class=single>
  <div class=dialog-bound>
    <div class="bordertop"></div>
    <div class="content">Hello World</div>
    <div class="borderbottom"></div>
  </div>
</body>

和CSS：

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound{
  margin: 50px auto;
  max-width: 32em;
  background: transparent;
}
body.single .dialog-bound .content{
  padding: 0 5px 2px 5px;
  background-color: #FFFCF2;

}
body.single .dialog-bound .bordertop{
  border-radius: 10px 10px 0px 0px;
  background:#89BAE2;
  height:28px;
  -webkit-border-radius: 10px 10px 0 0;
}
body.single .dialog-bound .borderbottom{
  border-radius: 0 0 5px 5px;
  background:#89BAE2;
  height:8px;
  -webkit-border-radius: 0 0 5px 5px;
}

我的测试在一个完全更新的 Galaxy Nexus 上。