Absolute Position Issue with :before pseudo element with IE 11< vs. all other browsers

Question

Please note: Using a separate stylesheet or conditional comments to flag IE11 or less is not an option, so I need a solution that will work in the global CSS for all browsers.

I'm using the "before" pseudo element on a heading element to insert a left double quote. It looks fine in Chrome, Firefox, Safari Mobile, etc. but IE 11 and less it's about 30 px higher.

I've tried everything I can think of and nothing I do will position the double quote in the same spot across all browsers.

Does anyone know of a fix?

Here's my JSFiddle.

HTML:

<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</h1>

CSS:

body {
    margin: 20px;
}
h1 {
    font-family: Arial, Helvetica, Sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    position: relative;
    padding-left: 44px;
}
h1:before {
    font-weight: bold;
    font-size: 70px;
    font-size: 4.375rem;
    line-height: 50px;
    line-height: 3.125rem;
    position: absolute;
    top: 6px;
    left: -5px;
    content:"“";
}

Chrome:

IE 11:

Answer 1

Not sure if using rems is critical for your project, but removing line-height: 3.125rem; from h1:before will make it render the same in IE11.

I've heard IE11 has a bug with rems for line-height. I'll see if I can find a source for this.

---

Edit:

The bug has been filed to the IE team, but has not been fixed. See this. A user replies with a workaround using Modernizr. Unable to link directly to the workaround, but quoted below:

Posted by lmeurs on 07.04.2014 at 04:59

A workaround is to use Modernizr with the following custom test which tests the height of a pseudo element with a line height defined in rems.

// Based on https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/generatedcontent.js
Modernizr.testStyles('#modernizr{font:0/0 a}#modernizr:after{content:":)";visibility:hidden;font:7px/1 a; line-height: 5rem}', function( node ) {
    Modernizr.addTest('pseudoelementlineheightinrems', node.offsetHeight >= 10);
});

Modernizr now adds a 'pseudoelementlineheightinrems' or 'no-pseudoelementlineheightinrems' CSS class to the HTML tag which can be used to apply different styling