<!doctype html>

 <html>

 <head>

     <style>

       .fr{float:right;display:inline}

       li{border:1px solid #ccc;width:150px;height:18px}

       li img{width:16px;height:16px}

       ul{widht:100%;height:100%}

    </style>

 </head>

 <body>

    <ul><li>哈哈<img class='fr' src='aaa.gif'></li><ul>

 </body>

 </html>

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

于是修改成

 <!doctype html>

 <html>

   <head>

       <style>

         .fr{float:right;display:inline}

         li{border:1px solid #ccc;width:150px;height:18px}

         li img{width:16px;height:16px}

         ul{widht:100%;height:100%}

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

       .clearfix{*zoom:1;}

      </style>

  </head>

  <body>

     <ul><li class='clearfix'>哈哈<img class='fr' src='aaa.gif'></li><ul>

  </body>

  </html>

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

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

  <!doctype html>

  <html>

    <head>

        <style>

          .fr{float:right;display:inline}

          .fl{float:left;display:inline}

          li{border:1px solid #ccc;width:150px;height:18px}

          li img{width:16px;height:16px}

          ul{widht:100%;height:100%}

     .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

        .clearfix{*zoom:1;}

       </style>

   </head>

   <body>

      <ul><li class='clearfix'><span class='fl'>哈哈</span><img class='fr' src='aaa.gif'></li><ul>

   </body>

   </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. Greenlets间如何实现互相通信？

    Greenlets互相通信之Event 1.为什么引入Event: 2.Event是什么: 3.编程实例. 为什么引入Event 1.windows中有Events,作为线程间同步的方法: 2.Gev ...

  2. BWT压缩算法（Burrows-Wheeler Transform）

    参考: BWT (Burrows–Wheeler_transform)数据转换算法 压缩技术主要的工作方式就是找到重复的模式,进行紧密的编码. BWT(Burrows–Wheeler_transfor ...

  3. [转]Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...

  4. [WPF]TextTrimming截断后，ToolTip显示完整信息

    文本过长被截断后,用ToolTip显示完整信息. 文本未被截断,则不显示ToolTip. 值转换器: public class TrimmedTextBlockVisibilityConverter ...

  5. session和cookie

    第一次听到cookie这个词的时候着实兴奋了一段时间,以为是小饼干呢~快喝一杯82年的java压压惊!哈哈~ 与cookie的第一次邂逅——清缓存和清cookie 刚毕业的时候上班,做二次开发,明明后 ...

  6. java使用代理 html2canvas 截屏 将页面内容生成图片

    1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...

  7. hihocoder-平衡树·SBT

    http://hihocoder.com/problemset/problem/1337 #1337 : 平衡树·SBT 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 ...

  8. 创建用资源管理器打开FTP位置

    FTP快捷方式默认用浏览器打开,而不是用资源管理器打开,管理文件不习惯. 解决方法1:创建桌面快捷方式 新建快捷方式,键入对象位置 %windir%\explorer.exe "ftp:// ...

  9. linux head、tail、sed、cut、grep、find

    head用法: head 参数 文件名 -cn:显示前n个字节    -n:显示前n行 例子:head -c20 1.txt 显示1.txt文件中前20个字符 ls |  head -20:显示前20 ...

  10. 自定义Spring Security权限控制管理（实战篇）

    上篇<话说Spring Security权限管理(源码)>介绍了Spring Security权限控制管理的源码及实现,然而某些情况下,它默认的实现并不能满足我们项目的实际需求,有时候需要 ...