在Safari瀏覽器中CSS線高度呈現不同

以下代碼在Firefox和Chrome瀏覽器中按預期方式呈現，但在Safari上會呈現邊框之間不需要的白線。在Safari瀏覽器中CSS線高度呈現不同

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：

Safari瀏覽器：

有人知道爲什麼會發生這種情況嗎？

JSFiddle

來源

2016-06-16 Helio Albano

看起來像Safari瀏覽器就不能接受你的零線高度。 – nicael

看起來像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>

來源

2016-06-16 16:29:47 nicael

好像比例的問題，邊界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>

來源

2016-06-16 18:24:34

在Safari瀏覽器中CSS線高度呈現不同

回答

相關問題