IE 11子像素渲染溢出

Question

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

正如你所看到的，在IE11上，仪表的红色部分似乎是＆＃34;偷看＆＃34;从底部开始，虽然在其他两个主要浏览器Chrome和FireFox上看起来很好。

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

似乎是在掩模上渲染一个子像素 标题＆＃34;温度＆＃34;呈现为高度为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>

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

Answer 1

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

Answer 2

我建议尝试将line-height设置为与元素的font-size相同，并确保这两者都是整数和像素。另请尝试使用pt而不是使用px来查看字体大小是否有用。

Answer 3

Edge10162-border-radius-bug.png - 现在看来它就在这里。这是微软针对这些漏洞的官方废话解决方案。 denial - 你知道MS 审查了来自msdn thread的包装解决方法吗？什么是不道德的混蛋。

替代解决方案

不要因为伪装成Gecko + Webkit而无视微软的边缘检测和阻碍变通办法他们的新UA-String。当您的用户注意到并反对劣质（即错误）时，只需将其指向此msdn denial和此匹配的MS-Connect书挡即可。当然，这个 SO线程。