Question

我相信chrome的边框颜色渲染可能存在错误。这是设置：

创建一个元素（我在div和td上看过它，两个位置：静态和位置：绝对）。
使此物体的宽度超过宽度的两倍
为每一面指定不同的颜色边框。
指定圆角的边框半径。

最终结果是左边缘的中间部分采用边框右边颜色而不是边框左边颜色。具体来说，如果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元素放在边框的有问题部分之上。

提前感谢能够提供更多相关信息的任何人。

Answer 1

确认已知问题：

Issue 106028
合并到Issue 113726

在设置了border-radius的高对象的左侧，Chrome使用了错误的边框颜色

1 个答案: