IE 11 sub-pixel 渲染溢出

Question

在 Internet Explorer 11 上，我遇到 sub-pixel 渲染导致元素溢出的问题。

如您所见，在 IE11 上，仪表的红色部分似乎 "peeking" 超出了底部，而在其他 2 个主要浏览器 Chrome 和 FireFox 上似乎没有问题。

如果我们放大 IE 中的问题，我们可以看到发生了什么：

它似乎在遮罩上渲染 sub-pixel。
header "Temperature" 呈现为高度为 34.5px 的元素，导致其下方的所有元素向下移动 .5px，从而导致此问题。

仪表盘是这样建立的：JSFiddle

<div id="temperature-gauge" class="gauge-control" data-percentage="0">
    <div class="header">Temperature</div>
    <div class="gauge-elements">
        <div class="gauge">
            <div class="inner"></div>
            <div class="spinner temp"></div>
        </div>
        <div class="pointer"></div>
        <div class="pointer-knob"></div>
    </div>
    <div class="indicator">60&deg; C</div>
</div>

除了给 header 一个静态高度之外，还有什么办法可以解决这个问题，以确保下面的所有元素都在 full-pixel 上吗？

Answer 1

我建议尝试将 line-height 设置为与元素的 font-size 相同，并确保它们都是整数且以像素为单位。也可以尝试使用 pt 而不是使用 px 设置字体大小，看看是否有帮助。

Answer 2

这是我认为最好的方法。我们可以避免 both IE 错误，方法是将仪表的 3 种颜色组合成一个 div，然后转换整个事物。 demo（针头还是分开的）。它也比您原来的方式更简单。

IE 11 sub-pixel 渲染溢出

IE 11 sub-pixel rendering overflow

html

css

internet-explorer

subpixel