问题描述：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 float浮动失效？
下一篇： js正则匹配，ie显示.length为空或不是对象
11条评论( 网友:5 条,站长:6 条 ) 网友评论{有您的评论更精彩....}