由於vertical-align屬性的相容性，以及vertical-align:middle並不是嚴格意義的垂直居中，因此，小圖示+文字的對齊，基本上都要針對不同瀏覽器加個hack補丁；在加上，如果你的圖示尺寸一會兒16畫素，一會兒18畫素，顯然，沒法通過全域性一個設定使得整站的小圖示和文字都對齊良好！

我們要想20畫素高的圖示和20畫素高的文字天然對齊顯示，需要滿足這兩個條件：

1. overflow屬性值除了visible都不行；
2. 裡面需要有不加修飾的文字內容；

所以，下面兩種情況都是淘汰的！

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: ...
    overflow: hidden;
 
     
}

<i class="icon"></i>     

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: ...
}

第一種情況是overflow:hidden拖後腿了；第二種情況是<i>標籤裡面是空大屁，基線還是元素底邊緣而不是裡面的文字（如果有）。

.icon { 
    display: inline-block; 
    width:20px; height:20px; 
    background: ...; 
    white-space:nowrap; 
    letter-spacing: -1em; 
    text-indent: -99em; 
    color: transparent;
    /* IE7 */
 

    *text-indent: 0;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');
}
.icon:before {
    /* 偽元素插入空格文字 */
    content: '\3000'; 
}