IE 11子像素渲染溢出 [英] IE 11 sub-pixel rendering overflow

问题描述

在Internet Explorer 11上，我有一个子像素呈现问题，导致元素溢出。

stack.imgur.com/SsB4F.pngalt =子像素渲染错误IE，Chrome，FireFox>

正如你所看到的，在IE11上，红色部分规格似乎是从底部偷看，而在其他两种主流浏览器Chrome和FireFox上看起来还不错。

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

它似乎是在掩膜上渲染一个子像素。

头文件Temperature呈现作为一个高度为34.5px的元素，导致它下面的所有元素向下移动.5px，导致此问题。

这是量表的构建方式： JSFiddle

 < div id = temperature-gaugeclass =gauge-controldata-percentage =0> 
< div class =header>温度< / 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; ℃下/ DIV> 
< / div> 
  

有没有什么办法可以解决这个问题，除了给头部一个静态高度外，下面是一个全像素？

解决方案

这是我认为最好的方法。我们可以通过将测量仪的三种颜色组合成一个div来避免两个 IE错误，然后转换整个事情。 演示（针头仍然是分开的）。它比原来的方式更简单。

On Internet Explorer 11, I have an issue with sub-pixel rendering causing an overflow of an element.

As you can see, on IE11, the red part of the gauge seems to be "peeking" out of the bottom, while it seems fine on the other 2 major browsers Chrome and FireFox.

If we zoom in on the issue in IE, we can see what's happening:

It seems to be rendering a sub-pixel over the mask.
The header "Temperature" renders as an element with the height of 34.5px, causing all elements underneath it to be shifted .5px down, causing this issue.

This is how the gauge is built up: 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>

Is there any way to solve this, other than giving the header a static height, to ensure all elements underneath are on a full-pixel?

解决方案

Here's the best approach I think. We can avoid both IE bugs by combining the gauge's 3 colors into a single div, then transforming the whole thing. demo (the needle is still separate). It's simpler markup than your original way too.

这篇关于IE 11子像素渲染溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！