衝突時斜體用來

我有行高18像素和字體大小16px的跨度元件。當內部文本不是斜體時，這很有用;跨度仍然是18像素高。

當跨度內的文本使用斜體或粗體時會出現問題。出於某種原因，span元素的高度增加了一個像素，我得到了一個19像素高的跨度。

此問題僅限於Firefox。 IE，Safari，Opera和Chrome沒有這個問題。無論如何，跨度仍然是18像素。

有沒有人有過這個問題？

這是有問題的代碼：

span 
{ 
    font-size : 18px ; 
    line-height : 18px ; 
} 

span.italicSpan 
{ 
    font-style : italic; 
}

這裏有一個例子：

請檢查其他瀏覽器，如果你的願望。您會注意到span元素保持18像素高，因爲它們應該根據行高保留：18px

2011-12-11 Edsfault

與webkit相同的問題。這看起來很有趣。 –

您無法調整內聯元素的行高。您需要浮動它，或將其設置爲display: block或display: inline-block。

2011-12-11 18:16:40 justis

好的。我可以確認它在webkit上修復它。 – FakeRainBrigand

根據我的問題與OP相同的假設：這並不適合我。我的問題是相似的 - 添加font-style：italic將1px添加到計算的高度，儘管線寬（在塊級祖先中正確指定）高於字體大小。只在Windows上展出，但在所有瀏覽器中都會發生。 –

@AdamA如果直接給出'display：block'元素本身或者聲明瞭一個明確的'height'，那麼計算的高度是否與斜體相同？ – justis

據我所知（查看安裝了Firebug的Firefox 8上的示例頁面），也存在第一個div元素的問題。

原因是，默認情況下，div元素從父級繼承行高度，該行高度恰好具有19px的值（這取決於字體和瀏覽器）。在內部元素上設置行高僅意味着實際行高的下限。

因此，解決方法是在封閉塊級元素上設置行高（或者將span元素轉換爲顯示中的塊元素，如其他元素所示）。

2011-12-11 19:09:04

我也遇到過這個問題。我認爲它與某些字體有關（例如，我曾用Sorts Mill Goudy發生過），以及斜體字相對於羅馬字母的大小。線條的高度取決於其中的內聯元素的「content box」，因此較大的斜體可能與計算出的線條高度混淆。

我發現的唯一可靠的解決方案（除了使用不同的字體）是使用斜體的vertical-align屬性。當正文文本與baseline對齊時，我發現將垂直對齊線條的top或bottom排序。

當然，現在您的斜體字與正文文本巧妙地錯位！最後，這取決於你是否有幫助。

2014-08-05 16:23:33 Keith

回答