這兩天寫個頁面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相同的取值，會大大減少不同浏覽器出現差别的情況，是以這也是開發中需要注意的地方。