サファリでCSSの線の高さが異なるレンダリング

Question

次のコードはFirefoxブラウザとChromeブラウザではレンダリングされますが、Safariでは境界線の間に不要な白線が描画されます。

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とChrome：

サファリ：

これはなぜ起こるのですか？

JSFiddle

Answer 1

Safariは、このような小さなボーダーのためのあなたのラインの高さは（ゼロラインの高さを呼び出すことができる場合高さ :)）不十分で見つけたように見えます。 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

、国境3.3emは、フォントサイズの1EMと完全にテキストをカバーすることはできません。 3.5emの枠線を変更するか、0.8emのフォントサイズを変更することができます。

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>