帶邊框半徑的模糊背景沒有像素完美的頂部偏移，在IE

Question

我有一個頁面根據文檔的寬度動態調整字體大小。 這會導致像素不完美的高度，但瀏覽器將它們圍起來。

在Internet Explorer中存在問題。

通常情況下，背景圖像從其元素的邊緣開始，與頂部偏移被舍入爲像素後的邊緣相同，但是當應用了border-radius時，背景將從元素的邊緣開始如果頂部偏移量不會被舍入，那麼圖像可能會模糊。

HTML

<div class="FIRST"></div> 
<div class="SECOND"></div> 

JS

document.body.onresize = function() { 
    document.body.style.fontSize = document.body.clientWidth/100 + 'em'; 
} 

CSS

.FIRST { 
    width: 200px; 
    height: 1em; 
    background-color: #000; 
} 

.SECOND { 
    width: 200px; 
    height: 21px; 
    margin-top: 10px; 
    background-image: url('data:image/gif;base64,R0lGODlhAQACAIAAAP////8AACH5BAAAAAAALAAAAAABAAIAAAICDAoAOw=='); 
    border-radius: 10px; /* if this is removed the background works as expected */ 
} 

http://jsfiddle.net/u8Bu8

如何讓它不模糊背景？

我想要一個CSS解決方案使用相同的HTML。

該base64 GIF只是1px寬和2px高，頂部像素紅色和底部白色。

截圖

從IE雙方，由兩個放大。

左側是預期的，但取決於窗口的寬度有時你會得到你在右側看到的東西。

Answer 1

我不知道我重新創建模糊的情況。這裏是與IE瀏覽器並列的&鉻。我試圖讓他們放大同樣的東西，但是他們彼此之間有點偏離。但老實說，IE看起來比Chrome更好。

http://chrislovestuff.blob.core.windows.net/img/css-bkg-border-radius.png