IE9 bug with increased font-size of css content

Question

I have found a bug in IE9 but googling for it hasn\'t helped finding any solution yet.

The following works fine in FF 3 + 4, Chrome, Opera and even IE8, but not in I

Answer 1

There is a work-around that allows font-sizes to be relative (em or %): add another class with the pseudo-element font-size reducing the size.

I've put together a fiddle showing the workaround but the basic code is below:

Test (1.25em = 20px)
Test (2em = 32px but 2.5em = 40px in IE)
Test (2em = 32px)

The styles then look like this:

body {
    font-size: 16px;
}

.one::before {
    content:      "::before";
    font-family:  monospace;
    font-size:    1.25em;
    margin-right: 10px;
}

.one-ie::before {
    font-size: 0.8em;
}

.two::before {
    font-size: 2em;
}

Most browsers will override the .one-ie::before selector with .two::before and IE's compounding will essentially negate the previous font-size. If IE fix the bug and allow pseudo-element styles to override rather than compound, the hack gets overridden like every other browser.