一直以来icon和文本需要对齐都使用vertical-align: middle;的方法，但兼容性不理想。参考了鑫旭大大的博客，终于收获不用vertical-align可以对齐的神技，原博点这里。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>icon对齐神技</title>
<style type="text/css">
a {
text-decoration: none;
color: #333;
}
/*全局统一lineheight,与icon高度一致*/
body {
font-size: 14px;
line-height: 20px;
}
.icon {
display: inline-block;
background: url('toplist.png') no-repeat 2px -139px;
20px;
height: 20px;
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';
}
</style>
</head>
<body>
<p style="color:blue;">使用空标签i</p>
<a href="#"><i class="icon"></i>某些东西</a>
<p style="color:blue;">使用a标签，标签内有文字</p>
<p ><a href="#" class="icon">某些东西</a>某些东西</p>
</body>
</html>