武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性，結(jié)果讓我大吃一驚，這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同。

最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性，結(jié)果讓我大吃一驚，這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同。

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

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

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

呃，這個(gè)結(jié)果其實(shí)很讓人匪夷所思，一般我會(huì)認(rèn)為Firefox會(huì)比IE解釋得更正確，但是看過(guò)Opera之后發(fā)現(xiàn)它和IE是一樣的，而Safari/Win是站在Firefox那邊。說(shuō)實(shí)話，我不知道這是怎么回事。

仔細(xì)學(xué)習(xí)了《CSS權(quán)威指南（第二版）》，甚至還去查閱了 W3C ，然后自己做出一個(gè)關(guān)于vertical-align的圖：

按照W3C的定義，當(dāng)內(nèi)聯(lián)元素的vertical-align設(shè)置為：

但是，即使是按照上面的準(zhǔn)則，各個(gè)瀏覽器的解釋如此迥異也讓我匪夷所思。我也懶得去研究為什么是這樣子?？偟膩?lái)說(shuō)呢，應(yīng)該就是它們對(duì)字體的每一條線的位置的定義都不大一樣，所以這個(gè)問(wèn)題不單跟vertical-align有關(guān)，而跟瀏覽器對(duì)內(nèi)聯(lián)文本和內(nèi)聯(lián)圖片的結(jié)構(gòu)的解釋有很大關(guān)系。

最后給大家一個(gè)測(cè)試頁(yè)面，可以方面的看看各個(gè)瀏覽器對(duì)vertical-align不同值的解釋結(jié)果。

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