繼承行高

的錯誤渲染我有SPAN包裝成另一個SPAN：繼承行高

<span id="outer"> 
    <span id="inner"> 
    Some long text 
    </span> 
</span>

和CSS：

#outer { 
    font-size: 20px; 
    font-family: 'Times New Roman'; 
    line-height: 30px; 
} 

#inner { 
    font-family: 'Times New Roman'; 
}

這種變異使得恰好在Opera，Safari瀏覽器，瀏覽器，FF相同。文本呈現精確到30px的線條高度。

如果外SPAN設置另一個字體家庭，例如Arial字體：

#outer { 
    font-size: 20px; 
    font-family: 'Arial'; 
    line-height: 30px; 
}

克羅姆和Safari呈現文本作爲31px行高。
FF - 30.5px的line-height
歌劇院 - 30PX（預期）

爲什麼出現這種情況？

注意：此標記和樣式由用戶在所見即所得編輯器中創建。

來源

2013-01-23 ZavtraMen

不同的字體 - 不同的'行高' – Morpheus

對內部跨度應用行高：30px並不能解決問題。 – ZavtraMen

如果您比較兩種字體，比如說在Photoshop中，您會看到不同的字體具有不同的大小。所以我相信'line-height'也會有所不同。 – Morpheus

如果你看看下面的圖片，你會發現，這兩種字體有不同的基線的高度。看起來，Times New Roman比Arial短約2px。

我不是字體渲染引擎的專家，但我最好猜測發生了什麼，應用於#outer的1-2px附加像素是由Arial爲2px更高造成的。

即使#inner中的字體是Times New Roman，由於它被設置爲Arial，渲染對外部div仍有影響。

希望這可以幫助您瞭解行高的其他像素位置。

line-height comparison

來源

2013-01-23 16:20:22 Axel

好猜，但我認爲這是錯的。如果我們在外部和內部切換字體系列，SPANS結果是相同的。外部的TNR和內部的Arial會導致渲染時線高相同。順便說一下，當兩個SPAN字體系列都設置爲TNR或Arial時，瀏覽器將這兩種變體渲染爲30px行高。當內部和外部SPAN具有不同的字體系列時，問題就開始了。 – ZavtraMen

這是因爲arial比Times New Roman高2px。反轉它會有同樣的效果。唯一不同的是內部div與Arial將比外部div高2px。您可以通過將鼠標懸停在Firebug上的兩種方案的標記上，並比較內部和外部跨度的藍色突出顯示區域來查看。 – Axel

「唯一不同的是，內部div與Arial將比外部div高2px。」但是，如果兩個跨度設置爲Arial，則文本呈現較低。 – ZavtraMen

應用的line-height值爲聲明價值，因爲你可以在瀏覽器中使用的開發工具看。剩下的就是渲染與繼承無關的差異，並且可能不受作者的控制。

來源

2013-01-23 17:16:47

是的，你是對的，這可能不是遺傳問題。但我不明白爲什麼設置外部SPAN行高影響內部SPAN渲染。如果我們從外部刪除行高並將其設置爲內部，則所有渲染都很好。這是真正的問題，因爲在我們所見即所得的編輯器中有指南網格和設置線條高度爲30px，這完美地表明文本不與網格對齊。 – ZavtraMen

回答

相關問題