CSS-Zeilenhöhe rendert auf Safari anders

Question

Der folgende Code wird in Firefox- und Chrome-Browsern wie erwartet gerendert, in Safari wird jedoch mit einer unerwünschten weißen Linie zwischen den Rahmen gerendert.

HTML:

<span>Text here</span> 

CSS:

span { 
    border-top: 3.3em solid #ff9933; 
    border-right: 3.3em solid #ff9933; 
    border-bottom: 3.3em solid #ff9933; 
    border-left: 3.3em solid transparent; 
    color: white; 
    display: inline-block; 
    font-size: 1em; 
    line-height: 0; 
} 

Firefox und Chrome:

Safari:

Weiß jemand, warum das passiert?

JSFiddle

Answer 1

Sieht aus wie Safari Ihre Zeilenhöhe findet (wenn Null Zeilenhöhe bezeichnet werden kann Höhe :)) unbefriedigend für eine solche kleinen Grenze. Funktioniert gut mit 3.5em.

span { 
 
border-top: 3.5em solid #ff9933; 
 
border-right: 3.5em solid #ff9933; 
 
border-bottom: 3.5em solid #ff9933; 
 
border-left: 3.5em solid transparent; 
 
color: white; 
 
display: inline-block; 
 
font-size: 1em; 
 
line-height: 0; 
 
}

<span>Text here</span>

Answer 2

Es ist wie ein Problem in keinem Verhältnis scheint, kann die Grenze 3.3em nicht decken vollständig den Text mit font-size 1em; Sie können den Rahmen für 3.5em ändern oder Sie können die Schriftgröße für 0.8em ändern.

span { 
 
border-top: 3.3em solid #ff9933; 
 
border-right: 3.3em solid #ff9933; 
 
border-bottom: 3.3em solid #ff9933; 
 
border-left: 3.3em solid transparent; 
 
color: white; 
 
display: inline-block; 
 
font-size: 0.8em; 
 
line-height: 0; 
 
}

<span>Text here</span>