1
我相信在鉻的邊框顏色渲染中可能存在一個錯誤。這裏是設置:在邊框半徑設置爲高的物體左側使用錯誤邊框顏色的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>
我的版本的Chrome 17.0.963.56男,在Windows XP上運行。我在Safari,Firefox或IE8中看不到這個問題。
任何人都可以確認這是一個已知的問題,還是有人知道標準的解決方法?
我能想到的最好的解決方法是使用圖像作爲邊界,但我還沒有能夠測試它,看它是否遭受同樣的錯誤。
另一個(難看的)選項可能是將正確顏色的另一個HTML元素放置在邊界的違規部分的頂部。
在此先感謝任何可以提供更多信息的人。
另一個奇怪的事情是,如果我滾動窗口下,邊界再次變爲藍色,然後回到紅色。 http://jsfiddle.net/j4yT4/當角落在屏幕上不可見時,顏色是正確的... – 2012-02-28 21:33:28