大家都對vertical align的各說各話

2022-09-23 08:47:06 字數 1199 閱讀 1169

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

vertical-align的值有點多,包括 baseline sub supper top text-top bottom text-bottom middle以及各種長度值(%,em,ex等等)。我先給大家看一個我覺得最誇張的值:bottom。**如下:

p img

呃,這個結果其實很讓人匪夷所思,一般我會認為firefox會比ie解釋得更正確,但是看過opera之後發現它和ie是一樣的,而safari/win是站在firefox那邊。說實話,我不知道這是怎麼回事。

仔細學習了《css權威指南(第二版)》,甚至還去查閱了 w3c ,然後自己做出一個關於vertical-align的圖:

按照w3c的定義,當內聯元素的vertical-align設定為:

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

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

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

原文:經典論壇交流