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?
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: