IE 11亚像素渲染溢出(IE 11 sub-pixel rendering overflow)

在Internet Explorer 11，我与子像素渲染造成的一种元素的溢出问题。

正如你所看到的，在IE11，压力表的红色部分似乎被“偷看”走出了低谷，而它似乎在其他两个主要的浏览器Chrome和Firefox的罚款。

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

这似乎是呈现在面具的子像素。
头“温度”呈现为与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浏览器漏洞。 演示 （针仍是独立的）。 它比你太原始的方式更简单的标记。

Answer 2:

我会建议您尝试设置line-height为相同font-size的元素，并确保这两个是整数，以像素为单位。 也可以尝试使用pt而是采用了px的字体大小，看它是否有帮助。

Answer 3:

Edge10162边界半径，bug.png -看起来像它在这里呆了。 下面是微软的虫子官方废话解决方案。 拒绝 -你知道MS 审查从包装解决办法MSDN线程 ？ 什么不道德的抽搐。


另一种解决方案

不要被他们的新UA字符串伪装成壁虎+ Webkit的无视微软的墙脚检测和阻塞的解决方法。 当你的用户注意到和对象，以质量低劣（又名错误），只需将它们指向这个MSDN否认与此匹配的MS-连接通吃。 ，当然， 这 SO线程。

文章来源: IE 11 sub-pixel rendering overflow