Google Chrome 在边框半径、背景颜色以及顶部和底部边框方面存在问题。这是要重现的证据和代码：
http://jsfiddle.net/6ADtd/4/ 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;
*/
}
The border-right:1px solid transparent;是评论中建议的一个技巧，它确实有助于删除不需要的中间实心条，但是当您resize窗口/浏览器 - 它再次出现。它与元素与浏览器窗口边缘的接近程度有关，我不太明白。有时您必须调整大小然后将鼠标悬停在元素上。
我桌面上的视频：
-
http://www.screenr.com/6wU8 http://www.screenr.com/6wU8（无右边界）
-
http://www.screenr.com/NVU8 http://www.screenr.com/NVU8（带右边界）
我试过了-webkit-多个属性上的前缀并且无法修复它。
我第一次发布此内容是因为我需要快速修复特定网站，但现在我注意到它出现在多个网站上，并且我已经确定了导致它的原因。这就是我除了 Firefox 之外没有在任何其他平台上进行测试所得到的结果。这可能是一个错误，我应该报告它，但与此同时我仍然需要修复。
理想的解决方案是使用 CSS，因此我可以在 CSS 文件中编写一两个选择器来进行修复，而不是在加载模板文件和数据库中挖掘以应用 div-wrap 或其他标记修复。有谁知道消除这个错误的技巧吗？
当我研究这个问题时，仍然存在一个问题在产品网站上 http://ctvetcenter.com/当调整浏览器大小以强制在文档上水平滚动时可见：
我使用的“解决方案”是应用两者
border-left:1px solid transparent;
border-right:1px solid transparent;
to #header使用开发者工具 - 无论调整大小，这似乎都会迫使问题消失，至少在 Mac Chrome 18 上是这样。
对我来说，这似乎是错误的行为 - 我推测这与颜色相交的混合角有关，由于错误，最终会渗入元素本身。
我试图调查导致这种行为的边界半径高于边界宽度之间可能的联系，但毫无结果。这当然是untrue http://jsfiddle.net/6ADtd/10/- 如果没有应用上述“解决方案”，使用不同的 x/y 半径不会产生任何结果。我想很高兴知道。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
