一种通过伪元素实现的更好的图片替换技术

昨天收到一条垃圾评论，内容是「多更新，要不然还以为您老人家去保卫钓鱼岛了呢」。所以今天说什么也得写一篇证明我还没那么热血。

在过去很长一段时间里，我们都习惯用负值 text-indent 的方法来进行图片替换。在最新的 HTML5 Boilerplate 中，我看到了一种新的图片替换技术。它采用 CSS 伪元素来实现，相对于以前的图片替换技术，它很好的解决一些手机浏览器的 bug，且没有属性覆盖的问题，并且不需要额外的标签。

.ir {
    overflow: hidden;
    *text-indent: -999em;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

在下面的范例中可以看到，伪元素设定为块元素，高度同容器一致，所以把文字顶到第二排去了，再结合 overflow:hidden; 将溢出的部分隐藏掉。面对不支持 :before 伪元素的 IE6/7，采用传统的负值 text-indent 方法。需要注意的是，采用这个图片替换技术后不能再对该元素设置 padding-bottom，否则文字会显示出来一部分。

这个图片替换的技术可以替换所有元素的背景（IE8+），不会出现需要 !important 的情况，对 SEO 非常友好，且向下兼容至 IE6。没有什么学习成本，现在就可以在自己的项目中换上这个技术了。