注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Perfect-World

以無法為有法,以無限為有限!

 
 
 

日志

 
 

ie6/7 margin-bottom失效解决方法  

2013-08-07 21:11:15|  分类: html/div/css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

问题描述: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>
  评论这张
 
阅读(773)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016