css – Chrome / WebKit在使用背景,边框半径和上/下边框时创建实心条

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;
  */
}

边框右边：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就不会产生任何结果.很高兴知道我猜.

原文地址：https://www.jb51.cc/css/215653.html