国产午精品午夜福利757视频播放,国精偷拍一区二区三区,亚洲精品一区二区妖精

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內(nèi)部靠右浮動，在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

發(fā)現(xiàn)效果未變，還是那個圖被擠在li下方

最終再幾經(jīng)測試之后，終于明白應(yīng)該把那個文字也要進(jìn)行浮動，但為什么文字也需要浮動還是沒有具體想明白,有清楚的兄弟告訴我一下，具體代碼如下

 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 飛天小筑閱讀(280) 評論(1) 收藏舉報

刷新頁面返回頂部

飛天小筑

導(dǎo)航

公告

ie7 用 clearfix 清除浮動時遇到的問題