Posizione assoluta Problema con: prima dello pseudo elemento con IE 11 <tutti gli altri browser

Question

Nota: l'utilizzo di un foglio di stile separato o di commenti condizionali per contrassegnare IE11 o meno non è un'opzione, quindi ho bisogno di una soluzione che funzioni nel CSS globale per tutti i browser.

Sto usando lo "pseudo elemento" precedente su un elemento di intestazione per inserire una virgoletta doppia sinistra. Ha un bell'aspetto in Chrome, Firefox, Safari Mobile, ecc. Ma IE 11 e meno è circa 30 px più in alto.

Ho provato tutto quello che riesco a pensare e nulla di quello che farò posizionerà la virgoletta doppia nello stesso punto su tutti i browser.

Qualcuno sa di una correzione?

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

Non sono sicuro se si utilizza REMS è fondamentale per il vostro progetto, ma la rimozione line-height: 3.125rem; da h1:before renderà rendere lo stesso in IE11.

Ho sentito che IE11 ha un bug con rems per line-height. Vedrò se riesco a trovare una fonte per questo.

---

Edit:

Il bug è stato presentato al team di IE, ma non è stato risolto. See this. Un utente risponde con una soluzione alternativa usando Modernizr. Incapace di collegarsi direttamente alla soluzione, ma qui si riporta:

Pubblicato da lmeurs il 07.04.2014 alle 04:59

Una soluzione è quella di utilizzare Modernizr con il seguente test personalizzato che mette alla prova la altezza di uno pseudo elemento con un'altezza di linea definita 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 aggiunge ora un 'pseudoelementlineheightinrems' o classe CSS 'no-pseudoelementlineheightinrems' al tag HTML che può essere utilizzato per applicare uno stile diverso

Answer 2

Prova questa

ci sono sicuramente problemi con l'utilizzo di dimensioni dei caratteri e altezze delle righe relative in pseudo classi, ad esempio 10 e 11.

Ho rimosso la posizione relativa dalla pseudo classe (quindi, per impostazione predefinita, dovrebbe essere statica) e l'altezza della riga che ho reimpostato su 0;

Ho quindi utilizzato l'allineamento verticale per posizionare la pseudo classe. Questo dovrebbe avere l'effetto desiderato.

h1:before { 
font-weight: bold; 
font-size: 70px; 
font-size: 4.375rem; 
line-height: 0; 
margin-left: -2rem; 
content:"“"; 
vertical-align: bottom; 

}

http://jsfiddle.net/205bhkau/2