在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

如何让它不模糊背景？

我想要一个使用相同HTML的CSS解决方案。

base64 GIF只有1px宽，2px高，顶部像素红色和底部白色。

截图

双方来自IE，放大了两个。

左侧是预期的，但是根据窗户的宽度，有时你会得到你在右侧看到的东西。

Answer 1

我不确定我是否会再现模糊的情况。这是与IE＆amp;铬。我试图让它们放大相同，但它们彼此有点偏离。但说实话，IE看起来比Chrome更好。

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