如何跨瀏覽器垂直對齊文本

請注意，我已經瀏覽了關於此主題的現有鏈接，但似乎對我的案例沒有任何幫助。如何跨瀏覽器垂直對齊文本

所有提示如何垂直移動文本以使其看起來對齊。在我的情況下，問題在於它已經在Chrome中對齊，所以當我嘗試對齊Firefox的文本時，它會錯位Chrome中的文本。

請在Firefox（v12）和Chrome（v19）中打開以下鏈接。

http://jsfiddle.net/UQ4D5/

你會發現，它被轉移向Firefox中的頂部，但在Chrome中完全一致。

2012-05-29 AppleGrew

根據經驗，某些場景將通過渲染引擎進行不同的處理 - 特別是在具有奇數高度的元素內部垂直對齊。好處是，相同的場景將在*瀏覽器內持續處理* 2px位移可能可以忽略 –

兩個在你的CSS屬性

display: table-cell; 
    vertical-align: middle;

2012-05-29 05:39:20

這似乎在FF和Chrome中正常工作。你能確認它是否在IE9 +中工作嗎？ – AppleGrew

是的，它工作IE + 8。 –

如果你檢查運行到瀏覽器的任何屬性比去這個網站http://caniuse.com/ –

該問題基於瀏覽器的默認樣式表。我建議你使用正確的reset Stylesheet甚至normalize.css

2012-05-29 05:36:51 gearsdigital

學習使用reset.css或normalize.css爲防止在瀏覽器中渲染模型的微小差異。

div { 
    font-size: 100px; 
    text-align: center; 
    height: 120px; 
    line-height: 120px; 
    border: 1px solid black; 
}

鉻指標：
enter image description here
火狐指標：

高度是在兩種情況下是相同的。

2012-05-29 05:45:29

在我的實際代碼中，我確實使用了重置。無論如何，我厭倦了FF中的解決方案，它仍然向上移動。演示：http://jsfiddle.net/UQ4D5/10/ – AppleGrew

我添加了這2個瀏覽器的統計數據，並且它們是相同的 –

即使您不使用'height'和'line-height'，高度仍然會保持不變。在這種情況下，它使用子節點（文本節點）來確定其高度。即使高度相同，文字的垂直位置也不是。我不知道如何衡量，除了採取截圖和使用比例。 – AppleGrew

回答