一、上集內(nèi)容簡單提要

上集內(nèi)容“我對CSS vertical-align的一些理解與認識（一）”要追溯到差不多一個月以前了，主要是了解了下vertical-align的一些屬性，并簡單講述了自己對vertical-align屬性的一些理解。vertical-align是個相當復雜與精深的屬性，所理解的一些內(nèi)容多少會有不準確之處，例如之前我認為inline屬性的元素對vertical-align屬性是不感冒的，但是在同行的提醒下，我自己一測試，發(fā)現(xiàn)完全不是之前自己所想的，就算是很單純的inline水平的元素都支持vertical-align屬性的。所以自己有必要對vertical-align的認識重新梳理，整理成文。本集內(nèi)容主要講講我對在一般情況下vertical-align其作用的理解，以及vertical-align相關(guān)的對齊問題，以及浮動為何可以破壞vertical-align屬性。

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

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

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

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


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

在展示不同瀏覽器下的表現(xiàn)之前，您可以先按照自己的理解想想會是什么樣的表現(xiàn)。

說實話，以我之前純粹的所謂想象經(jīng)驗式的理解，應該是后面的文字與大號文字的頂部對齊，事實是如何呢？看下面的IE陣營和現(xiàn)代瀏覽器陣營下的表現(xiàn)截圖：

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

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

就表象而言

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

text-top aligns the top of the box with the top of the parent element’s font

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

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

當前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可以理解為內(nèi)容實體，也就是圖片中的文字，我們設(shè)置span標簽的border屬性或是background屬性，所看到的圍繞文字的邊框以及背景色的區(qū)域就是指的content area，這個東西僅僅與文字的大小相關(guān)，其作用僅僅是顯示內(nèi)容而已，很多重要的工作都不是content area來執(zhí)行的。

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

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

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

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

父標簽的文字頂部
具體什么是“父元素的字體”我也不是很清楚，這是個很虛的概念，我甚至懷疑這本身就是個抽象出來的概念，例如一個div中兩個inline水平的標簽，一個vertical-align:text-top另外一個vertical-align”text-bottom，那么哪個才是這里的“父元素的字體”呢？我更加傾向于將這個“父元素的字體”解釋為，假設(shè)父標簽中有個很單純的文字，指無標簽，無嵌套的文字，所有屬性純粹繼承的文字（即使這個文字根本不存在），那么這個文字就是這里所指的“父元素的字體”。zxx://難以搜到相關(guān)資料，上述觀點都是自己推測的，僅供參考

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

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

具體實現(xiàn)參見下面的Flash動畫演示(以下為Flash動畫，點擊“下一步”按鈕查看演示與說明)：

IE瀏覽器的解釋

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

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

IE8瀏覽器的UI表現(xiàn)欲IE6/7還是有一點差異的，差異在于父元素的高度。IE8瀏覽器的父元素高度被撐開了，而IE6/7這里反而不撐開了（⊙﹏⊙b汗），IE8下高度為227像素，這多出來的27像素是60像素的文字下移與后面文字頂部對齊的距離。這與現(xiàn)代瀏覽器下的父標簽撐開表現(xiàn)是有些類似的，IE8瀏覽器可以說是有改進的，但是在理解父元素的頂部上似乎與現(xiàn)代瀏覽器有偏差，不知在IE9瀏覽器下會是怎樣的一個表現(xiàn)。一起拭目以待。

內(nèi)容真多，已經(jīng)連續(xù)寫了好幾個晚上了，不得已，還得分篇敘述……資質(zhì)尚淺，理解上可能有錯誤，歡迎指正，不甚感謝！

最新評論