這兩天寫個頁面css的時候用到了vertical-align屬性，使用過程中踩到了坑，所以總結如下：
1.vertical-align的語法
vertical-align屬性的具體定義列表如下：
語法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <長度> | inherit
說明： 設置元素內容的垂直對齊方式
值： baseline：基線對齊；sub：下標；super：上標；top：頂端對齊；text-top：與文本的頂端對齊；middle：中部對齊；bottom：底端對齊；text-bottom：文本的底端對齊；
百分比和長度：CSS2，可為負數。
初始值： baseline
繼承性： 不繼承
適用於： 行內元素和單元格（table-cell）元素
媒體： 視覺
計算值： 百分比和長度值為絕對長度；其他同指定值
特別提醒：vertical-align只對行內元素有效，對塊級元素無效。
關於使用的詳細介紹可以參考逍遙嘆的《垂直對齊：vertical-align屬性（轉）》。
2.關於vertical-align：middle的問題
middle的時候，是該元素的中心對齊周圍元素的中心。這里“中心”的定義是：圖片當然就是height的一半的位置，而文字應該是基於baseline往上移動0.5ex。但是很多瀏覽器往往把ex這個單位定義為0.5em，以至於其實不一定是文字的正中心。
所以在使用middle的時候要特別注意，要在不同瀏覽器中調試。
3.我遇到的問題
頁面局部html代碼：
1 <ul class="gclearfix"> 2 <li> 3 <em class="num top">1</em> 4 <a href="#">我這段長長的文字只是來測試行內高度的的的的的的的的的的。。。。。。。。。。。。。</a> 5 <a class="detail" href="#"></a> 6 </li> 7 </ul>
相關樣式表css代碼：
1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;vertical-align: middle;} 2 #hot-sou ul li .num{width: 15px;height: 15px;margin-top: 3px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;} 3 #hot-sou ul li .top{background-color: #F6872C;} 4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;} 5 #hot-sou ul li .detail{width: 17px;height: 17px;line-height: 17px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;}
注意上圖中的代碼我在li中使用了vertical-align：middle；li是塊級元素。
(by guorui-20120920)
根據上面的介紹我們可以推斷這樣使用是不正確的，vertical-align不繼承，所以li中a的vertical-align都按照瀏覽器的默認來取值。因此表現也會有差異。
chrome下的表現：
IE9下的表現： IE7下的表現：
IE6下的表現：
從上面的圖中可以看出，li中的vertical-align：middle（它本身就沒有這個屬性）；並沒有“遺傳”給它里面的em和a（em和a被瀏覽器“潛規則”了）。
解決的辦法是把vertical-align：middle；正確的寫入到li中的em和a里面。
1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;} 2 #hot-sou ul li .num{width: 15px;height: 15px;margin-top: 3px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;} 3 #hot-sou ul li .top{background-color: #F6872C;} 4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;vertical-align: middle;} 5 #hot-sou ul li .detail{width: 17px;height: 17px;line-height: 17px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;} 6 #hot-sou ul li .detail:hover{background-position:0 -30px;}
更新代碼后。。。
chrome下的表現：
IE9下的表現： IE7下的表現：
IE6下的表現：
通過上面的比較發現，還是沒有對齊，但是這是代碼中的邊距、行高等影響了我們，現在我們把他們統一起來。
1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;} 2 #hot-sou ul li .num{width: 15px;height: 15px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;} 3 #hot-sou ul li .top{background-color: #F6872C;} 4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:15px;line-height:15px;white-space:nowrap;vertical-align: middle;} 5 #hot-sou ul li .detail{width: 15px;height: 15px;line-height: 15px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;} 6 #hot-sou ul li .detail:hover{background-position:0 -30px;}
更新代碼后。。。
chrome下的表現： IE9下的表現：
IE7下的表現： IE6下的表現：
通過上面的比較，我們發現這樣統一設置行高后，li中子元素的基線一致了，垂直居中也就獲得了比較滿意的結果。
總結：這次遇到的問題主要是vertical-align正確使用的問題，通過研究了解到如何規范使用，特別是有些屬性在塊級元素和行內元素使用上的差別。同時不同瀏覽器對於屬性默認值的解析也是測試時需要注意的問題。如果開發中使用的是height與line-height相同的取值，會大大減少不同瀏覽器出現差別的情況，所以這也是開發中需要注意的地方。