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

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

　　IE6下的表現(xiàn)：

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

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

　　IE6下的表現(xiàn)：

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

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

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

最新評(píng)論