解決跨瀏覽器類型的差異？

我的目標是讓這個div內的文本顯示在它的容器跨瀏覽器的中間。解決跨瀏覽器類型的差異？

如果我能做到這一點，它將使我能夠使用更少的圖像。

http://jsfiddle.net/tMFaD/

注意這個例子看起來如何在Chrome/Safari和Firefox不同。這個問題似乎顯然與類型/行高/類似（火狐上的'1'更高）有關。

這可以很容易地完成？

UPDATE：這就是我要解決的小分歧：http://cl.ly/2A2o371c2O2r3q0T0R2E

更新2：我還沒有找到一個明確的跨瀏覽器的解決方案，但一些在這個線程的答案應該來大部分時間足夠接近。我使用的解決方案是針對此元素使用針對瀏覽器的規則。我也可以使用圖像/精靈。

來源

2012-02-15 sgb

看起來在Chrome，火狐和IE9一樣對我。 – 2012-02-15 11:05:27

爲什麼不設置'width'和'height'，然後設置'text-align：center'和'line-height'與你的'height'相同？編輯，我看不出在Chrome和FF的任何差異。 – Niklas 2012-02-15 11:06:03

另外'display：block;'不需要，因爲DIV已經是塊級元素。 – 2012-02-15 11:06:25

您可以設置線高以匹配框的高度，然後刪除頂部和底部填充。這將在盒子的（垂直）中間對齊它。

來源

2012-02-15 11:07:47 jao

你可以做到在幾個方面：

.box { 
    font-size: 44px; 
    font-weight: bold; 
    color: white; 
    text-align: center; 
    background: pink; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 80px; 
    height: 80px; 
} 

.box { 
    width: 80px; 
    height: 80px; 
    font-size: 44px; 
    line-height: 80px; 
    font-weight: bold; 
    color: white; 
    background: pink; 
    text-align: center; 
}

兩者都會產生相同的結果：

http://jsfiddle.net/spacebeers/s9Urm/8/

編輯：要獲得一級或跨瀏覽器/跨操作系統的精確度，我認爲你將不得不爲某些人使用單獨的樣式規則，或者只是使用圖像。

來源

2012-02-15 11:17:01 SpaceBeers

對於我（os x），在ff中，類型仍然高出2/3px。雖然非常接近。 – sgb 2012-02-15 11:21:26

如果你有一個應該排序的數字。 – SpaceBeers 2012-02-15 11:22:35

http://cl.ly/2A2o371c2O2r3q0T0R2E顯然這很挑剔，但它很重要 – sgb 2012-02-15 11:26:19

另一項建議，使用line-height控制vertical middle，而不是padding：

.box { 
    display:block; 
    font-size: 44px; 
    font-weight: bold; 
    color: white; 
    text-align: center; 
    background: pink; 
    float: left; 
    line-height:80px; 
    width:80px; 
    height:80px; 
}

來源

2012-02-15 11:17:35 Giberno

解決跨瀏覽器類型的差異？

回答

相關問題