IE 11 sub-pixel rendering overflow

Question

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?

Answer 1

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.

Answer 2

I would recommend trying to set the line-height to the same as the font-size of the element, and make sure that both of these are integers and in pixels. Also try using pt instead of using px for font sizes to see if it helps.