问题描述: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. JSON下

    JSON下:目录一:把 JSON 文本转换为 JavaScript 对象二:JSON 实例 - 来自字符串的对象 一.把 JSON 文本转换为 JavaScript 对象JSON 最常见的用法之一,是 ...

  2. [问题2014S08] 复旦高等代数II(13级)每周一题(第八教学周)

    [问题2014S08]  设分块上三角阵 \[A=\begin{bmatrix} A_1 & B \\ 0 & A_2 \end{bmatrix},\] 其中 \(m\) 阶方阵 \( ...

  3. Bootstrap_导航

    一.标签形tab导航 标签形导航,也称为选项卡导航. 标签形导航是通过“.nav-tabs”样式来实现.在制作标签形导航时需要在原导航“.nav”上追加此类名. <ul class=" ...

  4. GZFramwork数据库层《三》普通主从表增删改查

    运行结果: 使用代码生成器(GZCodeGenerate)生成tb_Cusomer和tb_CusomerDetail的Model 生成器源代码下载地址: https://github.com/Gars ...

  5. DSO转换规则的Aggregation默认为覆盖MOV

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. 无法从命令行或调试器启动服务,必须首先安装Windows服务(使用installutil.exe),然后用ServerExplorer、Windows服务器管理工具或NET START命令启动它

    无法从命令行或调试器启动服务,必须首先安装Windows服务(使用installutil.exe),然后用ServerExplorer.Windows服务器管理工具或NET START命令启动它 1. ...

  7. HDU-4531 吉哥系列故事——乾坤大挪移 模拟

    题意:给定一个九宫格,然后能够选择某行或者是某列滚动,每个小方格分为上下左右四个块,每个块可以涂上4种不同的颜色.问最少使用多少步能够使得所有相同颜色相互联通. 分析:由于九宫格的所有的状态只有9!( ...

  8. Jquery报错:Uncaught TypeError: ((m.event.special[e.origType] || (intermediate value)).handle || e.handler).apply is not a function

    页面中出现了Jquery报错:Uncaught TypeError: ((m.event.special[e.origType] || (intermediate value)).handle || ...

  9. 学习mongo系列(八)密码与权限

    一.设置密码及用户角色[1] > db.createUser(... {... user: "maxh",... pwd: "123",... roles ...

  10. 运行Maven是报错:No goals have been specified for this build

    No goals have been specified for this build. You must specify a valid lifecycle phase or a goal in t ...