小图标 + 文字 的对齐问题

常常会在不少网站的导航栏上看到小图标+文字形式的<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>有此反作用