武林網(www.companysz.com)文章簡介：最近幾天仔細研究了一下vertical-align這個屬性，結果讓我大吃一驚，這個很“資深”的CSS標準竟然在各個瀏覽器里面的表現都各不相同。

最近幾天仔細研究了一下vertical-align這個屬性，結果讓我大吃一驚，這個很“資深”的CSS標準竟然在各個瀏覽器里面的表現都各不相同。

vertical-align的值有點多，包括 baseline sub supper top text-top bottom text-bottom middle以及各種長度值（%，em，ex等等）。我先給大家看一個我覺得最夸張的值：bottom。代碼如下：

p {
    font-size: 18px;
    line-height: 36px;
    font-family: Tahoma, sans-serif;
}
img {
    vertical-align: bottom ;
}

然后大家看一看這段CSS在各個瀏覽器中的效果（圖片是我故意做成那個樣子，為了可以看清楚相對位置）：

呃，這個結果其實很讓人匪夷所思，一般我會認為Firefox會比IE解釋得更正確，但是看過Opera之后發現它和IE是一樣的，而Safari/Win是站在Firefox那邊。說實話，我不知道這是怎么回事。

仔細學習了《CSS權威指南（第二版）》，甚至還去查閱了 W3C ，然后自己做出一個關于vertical-align的圖：

按照W3C的定義，當內聯元素的vertical-align設置為：

但是，即使是按照上面的準則，各個瀏覽器的解釋如此迥異也讓我匪夷所思。我也懶得去研究為什么是這樣子。總的來說呢，應該就是它們對字體的每一條線的位置的定義都不大一樣，所以這個問題不單跟vertical-align有關，而跟瀏覽器對內聯文本和內聯圖片的結構的解釋有很大關系。

最后給大家一個測試頁面，可以方面的看看各個瀏覽器對vertical-align不同值的解釋結果。

大家可以測試一下其他的值，比如middle或是text-top，也是各個瀏覽器完全不一樣。有什么心得大家來討論一下吧～～