html - 在 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，放大2倍

左侧是预期的，但根据窗口的宽度，有时您会看到右侧的内容。

Answer 1

我不确定我是否重现了您模糊的情况。这是 IE 和 Chrome 的对比。我试图让它们放大相同，但它们彼此之间有点偏离。但老实说，IE 看起来比 Chrome 好。

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