按钮图标与文字对齐

我们都知道同一段代码在不同浏览器的表现也可能不尽相同，这其中有着浏览器标准不符的原因、也有浏览器本身渲染引擎细微的差距。而最近在做一个带图标的按钮时，缺乏发现按钮的文本下沉了一像素。

通过调整 vertical-align 但没办法实现理想的图标与文字效果。

然后考虑到是浏览器对文字的渲染导致向下偏移了一个像素，这个灵感是来自于中英文之间相差三个像素。最后通过研究腾讯ISUX的文章《网站字体渲染过程》，发现这是由于系统的字体渲染导致下沉了一像素。

通过文章中的一张对比图可以得出几乎所有浏览器都有下沉一个像素的问题，面对这个下沉的一像素，为了使图标和文本对齐。决定把图标向下移动 1px

.btn{
    .btn-icon{
        position:relative;
        top:1px;
    }
}