CSS Sprite的新方法

最正式的方法就是给一个透明图片加样式：

<img src="blank.gif" width="16" height="16" class="sprite" />

但是这样做有一些缺点：
1. 会多一个图片的请求
2. 众所周知的，内联行里的图片和中文字的底端无法对齐。这个问题的解决办法也有，就是用“vertical-align: -2px;” 强行把图片拉下来一截。

第二种方法：

a {
    display: block;
    text-indent: -3000px;
    overflow: hidden;
    width: 20px;
    height: 20px;
    background: url(...);
}

这个方法很不错，唯一的缺点就是它只能用于样式被设为块级的元素。

第三种方法是我自己想出来的，比较山寨，但是挺实用：

<span class="sprite">&nbsp;&nbsp;</span>
.sprite {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    letter-spacing: -14px;
    padding-left: 50px;
    background: url(...);
}

其中padding-left用来调节宽度。

这个方法的好处在于：
1. 没有多余的空白图片
2. 支持inline样式
3. 良好的垂直对齐

但这个山寨方法有很多局限性：
1. 高度的调节很麻烦。不同的浏览器对字体和行高的解析不一致。
2. 可能在不同操作系统中宽度和高度会不一致。（我还没全面测试）

不管怎么样，这至少是一个在某些固定环境中可以尝试的方法。