Chrome/WebKit在使用背景,边框半径和顶部/底部边框时创建实心条

Question

Google Chrome使用边框半径,背景颜色以及顶部和底部边框进行操作.以下是重现的证据和代码:

http://jsfiddle.net/6ADtd/4/

<div></div>?

div {
  background:blue;
  border-top:10px solid red;
  border-bottom:10px solid red;
  border-radius:20px 20px 0 0;
  height:100px;
  /*
  border-right:1px solid transparent;
  */
}

这border-right:1px solid transparent;是一个在评论中建议的技巧,它确实有助于删除不需要的中间实体条,但是当您调整窗口/浏览器的大小时- 它会再次出现.它与元素与浏览器窗口边缘的接近程度有关,我无法理解它.您必须调整大小,然后有时将鼠标悬停在元素上.我桌面上的视频:

• http://www.screenr.com/6wU8(没有右边)
• http://www.screenr.com/NVU8(右边界)

我已经尝试-webkit-了几个属性的前缀,但无法修复它.

我第一次发布这个是因为我需要一个特定网站的快速修复,但现在我注意到它出现在几个网站上,我已经确定了导致它的原因.这就是我没有测试除Firefox之外的任何东西.这可能是一个错误,我应该报告它,但在此期间我仍然需要修复.

理想的解决方案是使用CSS,因此我可以在CSS文件中编写一个或两个选择器来修复,而不是通过加载模板文件和数据库来应用div-wrap或其他标记修复.有谁知道摆脱这个bug的任何技巧？

Answer 1

在我研究这个问题时，当调整浏览器大小以强制文档水平滚动时，产品网站上仍然存在一个问题：

我使用的“解决方案”是应用两者

border-left:1px solid transparent;
border-right:1px solid transparent;

使用#header开发人员工具 - 这似乎迫使问题消失，无论大小如何调整，至少在 Mac Chrome 18 上是这样。

对我来说，这似乎是错误的行为 - 我推测这与颜色相交的混合角有关，由于错误，最终会渗入元素本身。

我试图调查导致这种行为的边界半径高于边界宽度之间可能的联系，但毫无结果。当然，这是不真实的- 如果不应用上述“解决方案”，使用不同的 x/y 半径不会产生任何结果。我想很高兴知道。