Google Chrome使用边框半径,背景颜色以及顶部和底部边框进行操作.以下是重现的证据和代码：
<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;
*/
}
边框右边：1px实心透明;是评论中建议的一个技巧,它确实有助于删除不需要的中间实心栏,但是当您调整窗口/浏览器的大小时 – 它会再次出现.它与元素与浏览器窗口边缘的接近程度有关,我无法理解它.您必须调整大小,然后有时将鼠标悬停在元素上.
我桌面上的视频：
> http://www.screenr.com/6wU8(没有右边)
> http://www.screenr.com/NVU8(右边界)
我在几个属性上尝试了-webkit-前缀,但无法修复它.
我第一次发布这个是因为我需要对特定网站进行快速修复,但现在我注意到它出现在几个网站上,我已经确定了导致它的原因.这就是我没有测试除Firefox之外的任何东西.这可能是一个错误,我应该报告它,但在此期间我仍然需要修复.
理想的解决方案是使用CSS,因此我可以在CSS文件中编写一个或两个选择器来修复,而不是通过加载模板文件和数据库来应用div-wrap或其他标记修复.有谁知道摆脱这个bug的任何技巧？
解决方法
在我查看这个问题时,当浏览器调整大小以强制水平滚动文档时,仍然存在一个问题
on the prod website：
我使用的“解决方案”是两者兼而有之
border-left:1px solid transparent; border-right:1px solid transparent;
使用开发者工具加入#header – 这似乎迫使问题消失,无论调整大小,至少在Mac Chrome 18上.
这似乎对我来说是错误的行为 – 我推测它会与颜色相交的角混合有关,由于一个错误,它最终会流入元素本身.
我试图以无结果的方式研究边界半径高于边界宽度的可能联系,从而导致这种行为.当然,这是untrue-如果没有上述应用的“解决方案”,那么使用不同的x- / y-radii就不会产生任何结果.很高兴知道我猜.
