2012-02-28 34 views
1

我相信在鉻的邊框顏色渲染中可能存在一個錯誤。這裏是設置:在邊框半徑設置爲高的物體左側使用錯誤邊框顏色的Chrome設置

  1. 創建一個元素(我已經看到它的div和td的位置:static和position:absolute)。
  2. 使該物體高出其寬度的一倍以上
  3. 爲每邊分配不同的顏色邊框。
  4. 爲圓角指定邊界半徑。

最終的結果是,左邊的中間部分採用邊界右側顏色而不是邊界左側顏色。具體來說,如果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元素放置在邊界的違規部分的頂部。

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

+0

另一個奇怪的事情是,如果我滾動窗口下,邊界再次變爲藍色,然後回到紅色。 http://jsfiddle.net/j4yT4/當角落在屏幕上不可見時,顏色是正確的... – 2012-02-28 21:33:28

回答