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 回答