IE6，7 margin-bottom失效bug

2024-08-24 22:49:36

问题描述：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>

问题得以解决，写文备忘！

最新文章

热门文章