小圖標 + 文字 的對齊問題

常常會在不少網站的導航欄上看到小圖標+文字形式的<a>, 例如"手機客戶端下載"

上圖中, 導航欄有兩個小圖標, 先來看手機卓聘左側的phone icon,

小phone和"手機卓聘"同處在一個<li>之下, 見源碼

<li>
  <a target="_blank" href="http://c.highpin.cn/active/AppPromotionIndex">
    <em class="phone-icon"></em>
    <span style="*float:left;*margin-bottom:5px;">手機卓聘</span>
  </a>
</li>

<em>是一個佔位空元素, phone做爲它的background-image出現, 

background: url(https://image2.highpin.cn/image/shared/header/nav-new/phone-download-icon.gif) no-repeat left center;

那麼若是咱們用<img>取代<em>呢, 結果會怎麼樣, 比較在語義上來講<img>更合適一些, 它就是一個小圖標啊, 因而我試了一下, 發現"手機卓聘"這幾個字下沉了幾個像素, 查看<li>的css, 發現vertical-align是baseline, height和line-height都是12px, 設置並無問題, 那麼問題只能是<img>影響了<li>的行的baseline, 致使兄弟<span>中的文字下沉.

以後查看左側QQicon, 發現用的也是一樣技巧, 空<div> + background-image

 結論:

對於小圖標, 通常來講, 是單行文本, 例如導航欄中的圖標文字, 首選空元素 + 背景圖的形式, 這樣不會干擾baseline, 而<img>有此反作用