9

这是现在的 Android 错误 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 上，上面的 CSS 在 Chrome 和 Firefox 中完美运行。它也适用于我在 Firefox 中的 Android 2.3 下的 Atrix。因此，我真的怀疑这是虚拟像素与实际像素的问题，因为这些设备上的所有浏览器都同意视口大小。

4

3 回答 3

3

这是android浏览器的问题，它绘制圆角，如果border-width大于半径，则半径区域没有填充。

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

我在 android 的 bug 跟踪器上没有看到任何相关问题，有一个关于使用边框半径制作阴影的问题，我认为这是同一个问题，也许打开一个是个好主意（我在上面：P）

我知道这不会算作一个好的答案：P 但是如果你想要这个效果，你可以添加 2 个 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 中进行的。

于 2012-12-26T00:49:48.947 回答
1

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

HTML 代码是相同的，LESS 中的 CSS 像这样在索尼爱立信 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;
  }
}
于 2012-12-30T16:31:44.547 回答
0

你可以显示你的属性， max-width: 32em;所以你应该注意到你的边框..当字体到来时，“Hello World”边框变大并且在字体边框之前或之后变小..

实际上 max-width: http://reference.sitepoint.com/css/max-width属性可以调整字体大小。

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

于 2012-12-20T16:50:06.697 回答