php点点通
,欢迎大家一起探讨php教程!
Loading
您所在的位置:首页 > 数据库 > 正文

IE6下margin-bottom无效的解决方法

作者: 来源: 日期:2016-10-25 15:28:02 人气:127 加入收藏 评论:0 标签:

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


    本文网址:http://www.phpddt.com/2016category/db/113.html
    读完这篇文章后,您心情如何?
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    更多>>网友评论
    发表评论