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

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

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

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

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

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


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

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

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

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

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

就表象而言

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

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

翻譯過來就是：讓當(dāng)前box的頂部與父元素的文字的頂部對(duì)齊

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

當(dāng)前box的頂部
在本實(shí)例中，當(dāng)前box是包裹著“大大的文字”的這5個(gè)文字的span標(biāo)簽，那么這個(gè)標(biāo)簽的頂部在哪里呢？按照我對(duì)inline box模型的理解，這個(gè)標(biāo)簽的頂部應(yīng)該是在——見下圖標(biāo)注：

 
上圖中藍(lán)色的參考線就是這個(gè)span box的頂部。如果您了解line box模型，這個(gè)不難理解。line box中重要的幾個(gè)概念是：content area，inline box(以及匿名inline box)，以及由inline boxes組成的line box。1. 其中content area可以理解為內(nèi)容實(shí)體，也就是圖片中的文字，我們?cè)O(shè)置span標(biāo)簽的border屬性或是background屬性，所看到的圍繞文字的邊框以及背景色的區(qū)域就是指的content area，這個(gè)東西僅僅與文字的大小相關(guān)，其作用僅僅是顯示內(nèi)容而已，很多重要的工作都不是content area來執(zhí)行的。

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

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

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

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

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

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

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

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

IE瀏覽器的解釋

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

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

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

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

最新評(píng)論