IE css empty div extra padding bug

Most webdevelopers will have been in the situation that you want to use a background-image in an empty div and there is this whitespace padding at the bottom of the image.
Your stylesheet may look like

#mtdiv {
    position:relative;
    height:8px;
    width:12px;
    background-image: url(/images/bg_small.png);
    background-repeat: no-repeat;

    /* dit i tell you i hate IE? */
    border:1px solid;
}

and you html like:

<div id="mtdiv"></div>

And when measuring your screenshot in photoshop you have a 4px gap underneath the background image. The height is not 8px as you dictated, but 12px!

Gdamn, ok.

The answer lies in inheritance:
When e.g. the body tag has a font-size formatting rule, the #mtdiv will inherit the font size. IE is the only browser that treats an empty div as if there was a whitespace between the tags. Well, rarities in IE are nothing new, but come on!. Fortunately the fix to this problem is very simple:

#mtdiv {
    position:relative;
    height:8px;
    width:12px;
    background-image: url(/images/bg_small.png);
    background-repeat: no-repeat;

    font-size:0px; <-- add this to get rid of font-size inheritance.
}

This really had me gooing for a while. But yeey, in the end, this fixxed a lot of "why is there this x pixel difference in IE compared to all the other browsers!".