在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]--> |