chrome下的表现：
IE9下的表现： IE7下的表现：
IE6下的表现：
从上面的图中可以看出，li中的vertical-align：middle（它本身就没有这个属性）；并没有“遗传”给它里面的em和a（em和a被浏览器“潜规则”了）。
解决的办法是把vertical-align：middle；正确的写入到li中的em和a里面。
#hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}
#hot-sou ul li .num{width: 15px;height: 15px;margin-top: 3px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;}
#hot-sou ul li .top{background-color: #F6872C;}
#hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;vertical-align: middle;}
#hot-sou ul li .detail{width: 17px;height: 17px;line-height: 17px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;}
#hot-sou ul li .detail:hover{background-position:0 -30px;}
更新代码后。。。
chrome下的表现：
IE9下的表现： IE7下的表现：
IE6下的表现：
通过上面的比较发现，还是没有对齐，但是这是代码中的边距、行高等影响了我们，现在我们把他们统一起来。
#hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}
#hot-sou ul li .num{width: 15px;height: 15px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;}
#hot-sou ul li .top{background-color: #F6872C;}
#hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:15px;line-height:15px;white-space:nowrap;vertical-align: middle;}
#hot-sou ul li .detail{width: 15px;height: 15px;line-height: 15px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;}
#hot-sou ul li .detail:hover{background-position:0 -30px;}
