在边框半径设置为高的物体左侧使用错误边框颜色的Chrome设置

问题描述：

我相信在铬的边框颜色渲染中可能存在一个错误。这里是设置：在边框半径设置为高的物体左侧使用错误边框颜色的Chrome设置

创建一个元素（我已经看到它的div和td的位置：static和position：absolute）。
使该物体高出其宽度的一倍以上
为每边分配不同的颜色边框。
为圆角指定边界半径。

最终的结果是，左边的中间部分采用边界右侧颜色而不是边界左侧颜色。具体来说，如果w是对象的宽度，那么顶部w像素和底部w像素是正确的，但中间（h - 2w）像素着色不正确。

下面是一段代码和一个展示问题的屏幕截图。

<!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>

Incorrect Left Border in Chrome

我的版本的Chrome 17.0.963.56男，在Windows XP上运行。我在Safari，Firefox或IE8中看不到这个问题。

任何人都可以确认这是一个已知的问题，还是有人知道标准的解决方法？

我能想到的最好的解决方法是使用图像作为边界，但我还没有能够测试它，看它是否遭受同样的错误。

另一个（难看的）选项可能是将正确颜色的另一个HTML元素放置在边界的违规部分的顶部。

在此先感谢任何可以提供更多信息的人。

另一个奇怪的事情是，如果我滚动窗口下，边界再次变为蓝色，然后回到红色。 http://jsfiddle.net/j4yT4/当角落在屏幕上不可见时，颜色是正确的... – 2012-02-28 21:33:28

答

确认已知问题：

Issue 106028
合并成Issue 113726

在边框半径设置为高的物体左侧使用错误边框颜色的Chrome设置

相关推荐