1

在 Internet Explorer 11 上，我遇到了导致元素溢出的子像素渲染问题。

亚像素渲染错误 IE, Chrome, FireFox

如您所见，在 IE11 上，仪表的红色部分似乎从底部“窥视”，而在其他 2 个主要浏览器 Chrome 和 FireFox 上似乎很好。

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

亚像素渲染错误 IE，放大

它似乎在遮罩上渲染一个子像素。
标题“温度”呈现为高度为 34.5 像素的元素，导致其下方的所有元素向下移动 0.5 像素，从而导致此问题。

这就是仪表的构建方式：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>

有没有办法解决这个问题，除了给标题一个静态高度，以确保下面的所有元素都在一个全像素上？

4

2 回答 2

3

这是我认为最好的方法。我们可以通过将仪表的 3 种颜色组合到一个 div 中 来避免 这两个IE 错误，然后转换整个事物。演示 （针仍然是分开的）。它也比你原来的方式更简单的标记。

于 2015-07-08T12:37:57.147 回答
0

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

于 2015-06-28T10:44:06.657 回答