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或其他标记修复。有没有人知道摆脱这个错误的任何技巧？

Answer 1

在我查看这个问题时，当浏览器调整大小以强制水平滚动文档时，仍然可以看到问题on the prod website：

我使用的“解决方案”是同时应用

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

使用开发者工具

到#header - 这似乎迫使问题消失，无论调整大小，至少在Mac Chrome 18上。

这对我来说似乎是错误的行为 - 我推测它会与颜色相交的角混合，这会因为一个错误而最终流入元素本身。

我试图以无结果的方式研究高于边界宽度的边界半径之间可能的连接，从而导致此行为。当然，这是untrue - 如果不使用上述“解决方案”，那么使用不同的x- / y-radii就不会产生任何结果。很高兴知道我猜。

Answer 2

对不起我的初步回复有点懒。

如果用溢出隐藏的标题包围带有边框属性的div怎么样：http://jsfiddle.net/jugularkill/Jsdcz/

Answer 3

我从未在Chrome中看到过这样的行为，确实非常错误。 无论如何，你可以摆脱边界底部，它会工作正常。如果可能，只需在底部添加背景为红色的<div>。像这样：

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

或者仅限CSS解决方案，在div之后添加内容：

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