问题描述:ie6/7浏览器下,浮动元素贴近父元素的最后一行的元素(单行即指第1行)的margin-bottom值失效!

问题代码:

<style type="text/css">

ul{width:250px;border:1px #f00 solid; overflow:hidden;}
ul li{float:left;width:100px; height:35px; border:1px #00f solid;margin-bottom:10px;}
</style>

<ul>

<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
</ul>
<div>我是下面的元素</div>
 
触发条件:
 
子元素设置浮动float,还加了margin-bottom值(父元素有加overflow:hidden清除浮动)
 
解决方法:
 
方法1:(会额外增加一清浮动的元素)
 
改变清除浮动的方式,代码如下:
 

<style type="text/css">

.fix{clear:both;width:0; height:0;display:block; overflow:hidden;}
ul{width:250px;border:1px #f00 solid; overflow:hidden;}
ul li{float:left;width:100px; height:35px; border:1px #00f solid;margin-bottom:10px;}
</style>

<ul>

<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
<li class="fix"></li>
</ul>
<div>我是下面的元素</div>
 
方法2:针对ie6/7给父元素加padding-bottom属性,其值等于子元素的margin-bottom的值 (强烈推荐!)
 
代码如下:
 
<style type="text/css">
ul{width:250px;border:1px #f00 solid; overflow:hidden;*padding-bottom:10px;}
ul li{float:left;width:100px; height:35px; border:1px #00f solid;margin-bottom:10px;}
</style>

<ul>

<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
<li>测试margin-bottom</li>
</ul>
<div>我是下面的元素</div>
 
 
问题得以解决,写文备忘!

IE6,7 margin-bottom失效bug的更多相关文章

  1. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  2. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  3. 【IE6双倍边距】-IE6双倍边距的bug

    效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...

  4. 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

    前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...

  5. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  6. IE6下margin出现双边距

    在IE6下,块元素有浮动和横向margin的时候,横向的margin值会被放大成两倍 解决方法:添加display:inline; eg:下面的例子在IE6下会有两倍边距 <style> ...

  7. IE6的那些css常见bug(汇总)

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  8. 完美解决浮动IE6 7中的兼容性BUG问题

    想要创建出漂亮的网页设计,除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码,漂亮的设计就此就要完成了,却发 ...

  9. css ie6双倍margin现象

    IE6双倍margin bug 当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign. 解决方案: 1)使浮动的方向和margin的方向,相反. 所以,你就会发现, ...

随机推荐

  1. Android 进阶Android 中的 IOC 框架 【ViewInject】 (上)

    1.概述 首先我们来吹吹牛,什么叫IoC,控制反转(Inversion of Control,英文缩写为IoC),什么意思呢? 就是你一个类里面需要用到很多个成员变量,传统的写法,你要用这些成员变量, ...

  2. Android自定义View自定义属性

    1.引言 对于自定义属性,大家肯定都不陌生,遵循以下几步,就可以实现: 自定义一个CustomView(extends View )类 编写values/attrs.xml,在其中编写styleabl ...

  3. Designing a CSS based template

    http://veerle-v2.duoh.com/blog/comments/designing_a_css_based_template_part_i/

  4. ibatis mybatis sql语句配置 符号不兼容 大于号 小于号<!CDATA[ ]>

    ibatis mybatis sql语句配置 符号不兼容 大于号 小于号<!CDATA[ ]> 因为这个是xml格式的,所以不允许出现类似">"这样的字符,但是都 ...

  5. jQuery 效果 —— 滑动

    jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...

  6. [问题2014A08] 解答

    [问题2014A08] 解答 由假设知 \(f(A)=\mathrm{tr}(AA')\), 因此 \[f(PAP^{-1})=\mathrm{tr}(PAP^{-1}(P')^{-1}A'P')=\ ...

  7. hadoop2.0初识1.2

    1 hadoop启动方式(三种) 1.1 各个服务组件逐一启动 *dfs hadoop-daemon.sh start|stop namenode|datanode|secondarynamenode ...

  8. 我的android学习经历34

    用类对象作为ArrayAdapter绑定的基本数据类型(和SimpleAdater效果类似) 一般ArrayAdapter绑定的基本数据类型是String,接下来介绍一下类对象作为基本数据类型: 首先 ...

  9. wampserver You don't have permission to access / on this server. 解决 方法(转,正好碰到这样的事情了就转下来)

    最近在安装最近版wampserver 2.2 d时发现安装好后启动服务器,访问localhost显示You don't have permission to access / on this serv ...

  10. 解决Cannot find MySQL header files under /usr/include/mysql的错误

    按照下面的步骤能成功,亲测.转帖,做笔记 编译php-5.5-6的mysql支持,出现Cannot find MySQL header files under /usr/include/mysql. ...