技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> IE6,IE7中负缩进的问题

IE6,IE7中负缩进的问题

浏览:1781次  出处信息

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

建议继续学习:

  1. 让Vim(gVim)更好的支持python语法缩进(强烈推荐)    (阅读:6176)
  2. VIM 设置缩进    (阅读:3667)
  3. 用TAB缩进, 用SPACE对齐    (阅读:3121)
  4. 代码的缩进和嵌套    (阅读:2354)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:消失的列表背景 >>
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1