1. 我對不同瀏覽器解析vertical-align屬性的理解

在上集中，在最后提供的實例中，vertical-align:middle實際上應該是與后面的文字是獨立的，毫無關聯，就是說vertical-align無論是什么，都不影響文字在box中的位置（IE6/7對vertical-align理解與現代瀏覽器有差異）。但是在實際情況下，行高可能會小于inline-block或是類似于inline-block屬性的元素的content area的高度，此時vertical-align對文字的影響似乎是顯而易見的，那么這種影響是如果實現的呢？這就是本段的重點

1.1 我對vertical-align文字對齊相關屬性的理解

vertical-align屬性可以說是CSS中兼容性最糟糕的屬性之一了。比如說與文字相關的vertical-align屬性，vertical-align:text-top;和vertical-align:text-bottom屬性，這兩個屬性的解釋IE瀏覽器（IE6-8）和現代瀏覽器是不一樣的兩個派別。到底哪種表現是正確的，這是不能隨便做定論的。無論實現的機制如何，若能實現類似的效果表現，其實都可以說是正確的。在一般的使用條件下，例如小圖標+文字，vertical-align:text-top這類文字對齊類屬性在不同瀏覽器下的差異是較小的，這很難讓我們去思考與理解這些差異在什么地方。但是，如果我們將測試的元素進行簡化與放大，那么差異顯而易見，也更利于我們思考其中的原因所在

我們可以參見下面的測試代碼，一窺IE家族和現代瀏覽器下text相關vertical-align的差異表現

當line-height作為唯一的高度來源，且遠遠大于content area高度的時候（只與字體大小相關），此時我們可以喝直觀的看到不同瀏覽器下的表現。上面代碼很簡單，一個行高200像素的div，里面有一個帶有vertical-align:top屬性的字體大60像素的inline水平的行內元素，邊框只是便于觀看識別留下的

對比IE7瀏覽器和IE8瀏覽器下的表現我們可以看到，就文字的垂直對齊方面，兩者是一樣的，這也很符合自己以往對vertical-align:text-top的形象化的了解，也就是文字頂部對齊，看IE瀏覽器下就是文字頂部對齊的，后面的文字的頂部就與前面大號文字的頂部的文字對齊。所不同的就是IE8瀏覽器的外部div的高度被撐開了27像素，差不多是1/2個文字大小的高度。下面看看兩個代表性的現代瀏覽器下的樣式表現（Firefox3.6&Chrome5）

經過我的仔細對比，Firefox3.6下的頁面表現欲Chrome5瀏覽器下的是一模一樣的，不僅如此，還與Opera瀏覽器也是表現一致。于是，就單純從頁面表現上來看，出現了兩個陣營，不太和諧的IE陣營以及高度一致的現代瀏覽器陣營。但是究竟孰是孰非呢？這需要慢慢說來！

1.2 就表象而言

似乎可能好像IE瀏覽器下的表現符合我之前對vertical-align:text-top似是而非的理解，文字頂部對齊。看那，IE瀏覽器下，無論是IE6還是IE7或是IE8都是這樣子的。相比之下，現代瀏覽器下的樣式表現有些令人費解。OK，要追尋問題的解決最好的方法就是尋找他的根源，去需找它的定義，而不要根據一些表象而去臆測

翻譯過來就是：讓當前box的頂部與父元素的文字的頂部對齊

所以我們只要恰準了box的頂部以及父元素文字的頂部，就可以知道這類表現是怎么回事，哪種表現更加符合其本身的定義

1.2.1 當前box的頂部

在本實例中，當前box是包裹著“大大的文字”的這5個文字的span標簽，那么這個標簽的頂部在哪里呢？按照我對inline box模型的理解，這個標簽的頂部應該是在——見下圖標注：

上圖中藍色的參考線就是這個span box的頂部。如果您了解line box模型，這個不難理解。line box中重要的幾個概念是：content area，inline box(以及匿名inline box)，以及由inline boxes組成的line box

(1). 其中content area可以理解為內容實體，也就是圖片中的文字，我們設置span標簽的border屬性或是background屬性，所看到的圍繞文字的邊框以及背景色的區域就是指的content area，這個東西僅僅與文字的大小相關，其作用僅僅是顯示內容而已，很多重要的工作都不是content area來執行的

(2). 每個inline屬性的標簽外部都有一個inline box，這個inline box是看不見的，這個看不見的inline box扮演著重要的角色，此box與CSS中的line-height屬性相互配合構成了元素高度堆疊的基礎。以我的理解，inline box的高度純粹就是元素的line-height或是繼承的line-height值決定的。例如本實例中，父div的line-height為200像素，自然，含“大大的文字”的span標簽所在的inline box的高度就是200像素，換句話說，這個含有vertical-align:text-top屬性的span標簽的實際高度是200像素

(3). 本實例中有一段文字“后面是靜止的文字”外部并未直接包裹任何標簽，但是這段連續的文字外部也包裹了一個看不見的inline box（稱之為匿名inline box），其本質以及一些表現與inline box幾乎無異。也能占據200像素的高度

(4). span標簽外部不可見的inline box以及文字所在的匿名inline box共同組成了line box，line box也是不可見的，每行文字有且僅一個line box，line box的高度由其內部的一系列的inline boxes高度共同決定，由內部的inline boxes的上下最大絕對差值決定的。例如本實例中，在現代瀏覽器下，外部div的高度之所以會被撐開，是內部兩個inline boxes共同作用的結果

所以結合上面的簡單分析，本實例中含有vertical-align:tetx-top屬性的span標簽實際的box區域應該如下圖半透明綠色區域

1.2.2 父標簽的文字頂部

具體什么是“父元素的字體”我也不是很清楚，這是個很虛的概念，我甚至懷疑這本身就是個抽象出來的概念，例如一個div中兩個inline水平的標簽，一個vertical-align:text-top另外一個vertical-align”text-bottom，那么哪個才是這里的“父元素的字體”呢？我更加傾向于將這個“父元素的字體”解釋為，假設父標簽中有個很單純的文字，指無標簽，無嵌套的文字，所有屬性純粹繼承的文字（即使這個文字根本不存在），那么這個文字就是這里所指的“父元素的字體”

在本實例中，正好“后面是靜止的文字。”這段文字字符是純粹的文字，屬性完全繼承的文字，則“父元素字體的頂部”就可以認為是這段文字的頂部了

所以，綜上所述，實際占據200像素的span標簽要與后面的“純粹文字”頂部對齊，沒有辦法，這個span標簽只好下移，下移的距離為92像素，這個92像素時如何來的呢？很簡單：后面的文字實際也占據200像素的高度，其中本身文字大小16像素，也就是文字的content area占據16像素的高度，如果span標簽與文字垂直中線對齊，則下移為100像素，但是由于是頂線對齊，于是要少掉1/2個文字高度，也就是8像素，于是span標簽下移了92像素

我們會發現文字都是被200px的行高設置了高度

我們會發現因為設置和父元素內無修飾的文字的頂部對齊(僅僅是和文字頂部對齊，而不是和文字的所在的匿名inline box的頂部對齊)，所以這里將’大大的文字’下移來對齊

1.2.3 IE瀏覽器的解釋

像Firefox，Chrome，Opera瀏覽器被稱為modern browser（現代瀏覽器），也被稱為標準瀏覽器。這類瀏覽器對于CSS的渲染都是比較符合W3C標準的，但是IE瀏覽器，有點孤芳自賞之感，走了很多自己的路，于是在CSS的解釋與渲染上，很多與標準瀏覽器之間是有差異的。其中對vertical-align的解釋就是其中之一。本文之前所有的講解都是針對的現代瀏覽器

雖然IE8對不少vertical-align屬性的解釋與現代瀏覽器一致，但是有些還是走的其老套路。例如這里的vertical-align:text-top屬性。由于IE瀏覽器對vertical-align:text-top的解釋與標準有差異，所以我也無法準確說出其樣式表現的機制是什么。按照我自己未經證實的一些推測，IE瀏覽器（IE6-IE8）似乎將當前元素的頂部理解為了當前元素文字的頂部（也就是inline box模型中的content area的頂部，而不是inline box的頂部），于是vertical-align:text-top就是兩段文字之間的對齊，span文字的頂部與后面裸文字的頂部對齊。如果我們不仔細思考vertical-align的定義，可能就會覺得IE瀏覽器的實現似乎更合理，更容易理解

總結：

1. content area指的是內容實體，所看到的圍繞文字的邊框以及背景色的區域就是指的content area

總結

以上是生活随笔為你收集整理的我对CSS vertical-align的一些理解与认识（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。