webkit vs firefox文本的高度

Question

我有相當大的文本（字體大小28）我試圖在固定高度的容器中垂直對齊。

我這樣做的目的只是設置一個邊緣頂部，以便它到達正確的位置。但是，在Firefox中，我需要20px的margin-top，而在Safari中，我需要15px（否則它太慢了）。我看到這種差異是因爲在Safari中，文本元素比Firefox中高，並且在頂部包含少量的空白（在Firefox中不顯示）（在Firefox中，文本元素的頂部恰好是文本開始的時候）。

我試過所有有線高度的顯示組合，並且可能會爲文本和內容添加寬度/高度。什麼都沒有

我能做些什麼來使這一致？我討厭使用JS但它似乎是唯一的選擇......

---

Answer 1

跨瀏覽器CSS正常化，我建議復位 - YUI3有一個好，Twitter的引導是個不錯的選擇。它基本上將填充和邊距設置爲0，因此所有瀏覽器都會表現出來，並且只遵守您的css規則而不是他們自己的默認規則。

對於垂直對齊文本到容器，如果它是一行文本，請使用line-height屬性，並將其設置爲等於容器的高度。

例如：

CSS：

div { 
    height:300px; 
    width: 400px; 
    line-height: 300px; 
    font-size:28px; 
    background-color:#F0F0F0; 
} 

HTML：

<div> 
    Some vertically centered text 
</div> 

例子：http://jsfiddle.net/Djvv7/

Answer 2

您需要申請一個CSS復位。在所有項目中使用一種良好做法。我知道的最有名的是：http://meyerweb.com/eric/tools/css/reset/