Question

This is Android bug 41913 now.感谢任何人打开它！

我认为这与this older question几乎相同，尽管屏幕截图与我看到的截然不同。

我要做的是创建一个带有厚顶边框和圆角的框as in this JSBIN example。这适用于桌面浏览器（具有border-radius支持的浏览器）和iOS Safari和Android版Chrome浏览器，但旧的Android浏览器显示：

android http://gutfullofbeer.net/android.png

渲染边框使得曲线外的较厚部分不会到达边缘。有没有人知道是否有办法让浏览器正确地执行此操作？这似乎是至少回到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上，上述CSS在Chrome和Firefox中完美运行。它也适用于我的Atrix，在Firefox 2.3下的Android 2.3下。因此，我真的怀疑它是虚拟像素与实际像素问题，因为这些设备上的所有浏览器都同意视口大小。

Answer 1

这是Android浏览器的问题，它绘制圆角，如果border-width高于半径，则半径区域不会填充。

没有边框小于半径，浏览器不能很好地绘制它（你可以在http://jsbin.com/uxawuf/1中看到）

我没有在android的bug跟踪器中看到任何相关问题，there's one about using the border radius to make shadows我认为这是同样的问题，也许这是一个好主意打开一个（我在它上面：P）

我知道这不会算作一个好的答案：P但是如果你想要这个效果你可以添加2个div，一个用于边框顶部，另一个用于边框底部，并使用radius和background进行操作：（这里的例子是：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;
}

我的测试是在星系Nexus完全更新。

Answer 2

这确实是Android错误http://jsbin.com/uzuril/17，但可能会被伪造的元素欺骗http://jsbin.com/uzuril/15

HTML代码是相同的，在索尼爱立信Xperia的Android 4.0.3的默认浏览器和同一部手机的最新Chrome手机中测试的LESS就像这样。

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

Answer 3

您可以显示您的财产为max-width: 32em;，因此您应该注意   你的边界......当字体即将到来时，“Hello World”边框成为   更大，在字体边框之前或之后更小..

实际上是最大宽度：   http://reference.sitepoint.com/css/max-width财产正在运作   可调整的字体大小。

所以你应该修复这个问题属性使用Width =％used

当边界半径小于整体边框宽度时，Android浏览器会出现边框错误

3 个答案: