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>

上述代码的 目的 是让 图片在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>

发现效果未变，还是那个图被挤在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>

参考

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

ie7 用 clearfix 清除浮动时遇到的问题的更多相关文章

  1. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  2. clearfix清除浮动

    首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...

  3. clearfix清除浮动进化史

    我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的. .clear{cle ...

  4. [笔记]使用clearfix清除浮动

    转载自奶牛博客 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; ...

  5. clear-fix清除浮动的两种写法

    1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: ...

  6. css中clearfix清除浮动的用法及其原理示例介绍

    clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...

  7. clearfix 清除浮动的问题

    今天看一篇博文,发现其实有很多方法实现清除浮动,各有利弊 采用伪类:after进行后续空制的高度位零的伪类层清除 采用CSS overflow:auto的方式撑高 采用CSS overflow:hid ...

  8. CSS - clearfix清除浮动

    首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...

  9. .clearfix 清除浮动，@import

    我们知道,在网页的DIV+CSS布局中,很多时候要用到浮动. 既然有浮动,那就有清除浮动. 清除浮动有很多种方式,而在实际项目中,比较常用的是这一种. .clearfix:after { conten ...

随机推荐

  1. django一对多关系的小例题

    urls.py from django.conf.urls import urlfrom django.contrib import adminfrom son1.views import * url ...

  2. MFC编程入门之二十六（常用控件：滚动条控件ScrollBar）

    回顾上一节,讲的是组合框控件Combo Box的使用.本节详解滚动条控件Scroll Bar的相关内容. 滚动条控件简介 滚动条大家也很熟悉了,Windows窗口中很多都有滚动条.前面讲的列表框和组合 ...

  3. ECMAScript数组常用

    var arr = [22, 33, 44, 55, 66, 77, 88, 99]; //every 全部结果为true 则返回true var e = arr.every(function (m) ...

  4. SCOI2009粉刷匠

    Description windy有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色. 每个 ...

  5. mysql 5.7 忘记root密码解决方法

    1.修改配置文件 vim /etc/my.cnf 在[mysqld]节点添加 skip-grant-tables 2.重启mysql 3.用空密码进入 mysql -uroot 执行 update m ...

  6. JAVA GUI

    JAVA GUI中的事件处理:   委托事件模型:事件源对象和监听器对象具有绑定关系   一个监听器可以绑定多个事件源 一个事件源也可以绑定多个监听器 监听器有各自监听的事件类型   设置容器的布局管 ...

  7. 使用cocos2d-x c++ Android静态库

    在用cocos2d-x做Android开发时,每次clean后都会需要再次编译coco2d-x的库,十分耗时. 这里给出一个直接使用静态库而不用每次都编译源码的方法: 1\ 首先找到一个cocos2d ...

  8. JAVA 多线程随笔 (一) 可见性和volatile关键字

    // 先上代码 1 public class NoVisibility { private static boolean ready; private static int number; priva ...

  9. ios基础篇（三十）—— AFNetworking的使用

    一.AFNetworking的创建 1.新建工程,命名为AFNDemo 2.导入AFNetworking.h AFNetworking文件下载:https://github.com/AFNetwork ...

  10. 定时器springMVC