飞天小筑

导航

ie7 用 clearfix 清除浮动时遇到的问题 

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <style>
 5       .fr{float:right;display:inline}
 6       li{border:1px solid #ccc;width:150px;height:18px}
 7       li img{width:16px;height:16px}
 8       ul{widht:100%;height:100%}
 9    </style>
10 </head>
11 <body>
12    <ul><li>哈哈<img class='fr' src='aaa.gif'></li><ul>
13 </body>
14 </html>
View Code

上述代码的 目的 是让 图片在Li内部靠右浮动，在ie8+ ，以及chrome 之类的浏览器均正常，但在ie7 - 之下 不正常，第一个想到的就是浮动闭合问题

于是修改成

 1 <!doctype html>
 2 <html>
 3   <head>
 4       <style>
 5         .fr{float:right;display:inline}
 6         li{border:1px solid #ccc;width:150px;height:18px}
 7         li img{width:16px;height:16px}
 8         ul{widht:100%;height:100%}
 9 
10    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
11       .clearfix{*zoom:1;}
12      </style>
13  </head>
14  <body>
15     <ul><li class='clearfix'>哈哈<img class='fr' src='aaa.gif'></li><ul>
16  </body>
17  </html>
View Code

发现效果未变，还是那个图被挤在li下方

最终再几经测试之后，终于明白 应该把那个文字也要进行浮动，但为什么文字也需要浮动 还是没有具体想明白,有清楚的兄弟告诉我一下，具体代码如下

 

 1  <!doctype html>
 2  <html>
 3    <head>
 4        <style>
 5          .fr{float:right;display:inline}
 6          .fl{float:left;display:inline}
 7          li{border:1px solid #ccc;width:150px;height:18px}
 8          li img{width:16px;height:16px}
 9          ul{widht:100%;height:100%}
10  
11     .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
12        .clearfix{*zoom:1;}
13       </style>
14   </head>
15   <body>
16      <ul><li class='clearfix'><span class='fl'>哈哈</span><img class='fr' src='aaa.gif'></li><ul>
17   </body>
18   </html>
View Code

 

 

 

参考

《哪些年我们一起清除过的浮动》http://www.iyunlu.com/view/css-xhtml/55.html

posted on 2013-09-17 10:16  飞天小筑  阅读(276)  评论(1)  编辑  收藏  举报