在IE6，IE7下面给display: inline-block的元素设置text-indent: -9999px会把这个元素以及后面的元素拉走。请在IE6和IE7下，查看演示。
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
02 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
03 |
<head> |
04 |
<title>TEST</title> |
05 |
<style type="text/css"> |
06 |
.bar { |
07 |
border: 1px solid; |
08 |
display: inline-block; |
09 |
height: 18px; |
10 |
} |
11 |
.bar .icon { |
12 |
display: inline-block; |
13 |
width: 16px; |
14 |
height: 16px; |
15 |
background: red; |
16 |
text-indent: -9999px; |
17 |
} |
18 |
</style> |
19 |
<!--[if lte IE 7]> |
20 |
<style type="text/css"> |
21 |
.bar { |
22 |
display: inline; |
23 |
} |
24 |
</style> |
25 |
<![endif]--> |
26 |
</head> |
27 |
<body> |
28 |
<input type="text" /> |
29 |
<div class="bar"> |
30 |
<span class="icon"></span> |
31 |
<span>HELLO KITTY HELLO KITTY HELLO KITTY</span> |
32 |
</div> |
33 |
</body> |
34 |
</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为：
01 |
<!--[if lte IE 7]> |
02 |
<style type="text/css"> |
03 |
.bar { |
04 |
display: inline; |
05 |
} |
06 |
.bar .icon { |
07 |
display: block; |
08 |
float: left; |
09 |
} |
10 |
</style> |
11 |
<![endif]--> |