這兩天寫個頁面css的時候用到了vertical-align屬性，使用過程中踩到了坑，所以總結(jié)如下：
1.vertical-align的語法
vertical-align屬性的具體定義列表如下：
語法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <長度> | inherit
說明： 設(shè)置元素內(nèi)容的垂直對齊方式
值： baseline：基線對齊；sub：下標(biāo)；super：上標(biāo)；top：頂端對齊；text-top：與文本的頂端對齊；middle：中部對齊；bottom：底端對齊；
text-bottom：文本的底端對齊；
百分比和長度：CSS2，可為負(fù)數(shù)。
初始值： baseline
繼承性： 不繼承
適用于： 行內(nèi)元素和單元格（table-cell）元素
媒體： 視覺
計算值： 百分比和長度值為絕對長度；其他同指定值
特別提醒：vertical-align只對行內(nèi)元素有效，對塊級元素?zé)o效。
關(guān)于使用的詳細(xì)介紹可以參考逍遙嘆的《垂直對齊：vertical-align屬性（轉(zhuǎn)）》。
2.關(guān)于vertical-align：middle的問題
middle的時候，是該元素的中心對齊周圍元素的中心。這里“中心”的定義是：圖片當(dāng)然就是height的一半的位置，而文字應(yīng)該是基于baseline往上移動0.5ex。但是很多瀏覽器往往把ex這個單位定義為0.5em，以至于其實不一定是文字的正中心。
所以在使用middle的時候要特別注意，要在不同瀏覽器中調(diào)試。
3.我遇到的問題　
頁面局部html代碼：　

　　IE9下的表現(xiàn)：　                                        IE7下的表現(xiàn)：　　　　　　　　　　　　

　　IE6下的表現(xiàn)：

 
從上面的圖中可以看出，li中的vertical-align：middle（它本身就沒有這個屬性）；并沒有“遺傳”給它里面的em和a（em和a被瀏覽器“潛規(guī)則”了）。
解決的辦法是把vertical-align：middle；正確的寫入到li中的em和a里面。

　　IE9下的表現(xiàn)：　　　　　　　　　　　　　　IE7下的表現(xiàn)：

　　IE6下的表現(xiàn)：

 
通過上面的比較發(fā)現(xiàn)，還是沒有對齊，但是這是代碼中的邊距、行高等影響了我們，現(xiàn)在我們把他們統(tǒng)一起來。

　　IE7下的表現(xiàn)：　　　　　　　　　　　　　　IE6下的表現(xiàn)：

通過上面的比較，我們發(fā)現(xiàn)這樣統(tǒng)一設(shè)置行高后，li中子元素的基線一致了，垂直居中也就獲得了比較滿意的結(jié)果。
總結(jié)：這次遇到的問題主要是vertical-align正確使用的問題，通過研究了解到如何規(guī)范使用，特別是有些屬性在塊級元素和行內(nèi)元素使用上的差別。同時不同瀏覽器對于屬性默認(rèn)值的解析也是測試時需要注意的問題。如果開發(fā)中使用的是height與line-height相同的取值，會大大減少不同瀏覽器出現(xiàn)差別的情況，所以這也是開發(fā)中需要注意的地方。

最新評論