在IE6，IE7下面给display: inline-block的元素设置text-indent: -9999px会把这个元素以及后面的元素拉走。请在IE6和IE7下，查看演示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<style type="text/css">
.bar {
border: 1px solid;
display: inline-block;
height: 18px;
}
.bar .icon {
display: inline-block;
width: 16px;
height: 16px;
background: red;
text-indent: -9999px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.bar {
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<input type="text" />
<div class="bar">
<span class="icon"></span>
<span>HELLO KITTY HELLO KITTY HELLO KITTY</span>
</div>
</body>
</html>
在IE6，IE7下可以看到.bar里面的内容都没有了。最开始的想法是让.icon浮动来解决这个问题，可是用css hack给.icon加上float: left居然不起作用，.icon后面的文字仍然被拉走。这时候只好在blueidea求助，结果那里的版主（yoom）想法和我的一样，让.icon浮动，但是他比我多加了个display: block，最终这个BUG被修正了。正常情况下，span元素加上float之后就已经是block级别了，但就是这个display: block起了决定性的作用，按yoom的话说，真是无心插柳啊。
最终的CSS HACK为：
<!--[if lte IE 7]>
<style type="text/css">
.bar {
display: inline;
}
.bar .icon {
display: block;
float: left;
}
</style>
<![endif]-->
0 Comments.