我认为chrome渲染边框颜色时可能有一个bug。设置如下：
1.创建一个元素（我在div和td上都见过，包括position：static和position：absolute）。
1.使此对象的高度大于宽度的两倍
1.为每一侧指定不同颜色的边框。
1.指定圆角的边界半径。
最终结果是左边的中间部分呈现右边界颜色而不是左边界颜色。具体地，如果w是对象的宽度，则顶部w像素和底部w像素是正确的，但是中间（h -2 w）像素被不正确地着色。
下面是演示该问题的代码片段和屏幕截图。
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
<style>
div#borderBug
{
position:absolute;
top:10px;
left:10px;
width:152px;
height:541px;
border-width: 2px;
border-style: solid;
border-radius: 20px;
border-left-color: blue;
border-top-color: yellow;
border-right-color: red;
border-bottom-color: green;
background-color: #dedede;
}
</style>
</head>
<body>
<div id="borderBug"></div>
</body>
</html>
我的Chrome版本是17. 0. 963. 56 M，运行在Windows XP上。我在Safari、Firefox或IE8中没有看到这个问题。
有人能确认这是一个已知问题吗？或者有人知道标准的解决方法吗？
我能想到的最好的变通办法是使用图像作为边界，但我还没有能够测试这一点，看看它是否遭受了同样的错误。
另一个（丑陋的）选项可能是将另一个正确颜色的HTML元素放置在边框的违规部分的顶部。
1条答案
按热度按时间sauutmhj1#
确认的已知问题：
Issue 106028
合并到Issue 113726