2013-04-23
CSS margin-bottom在IE6/IE7下失效的处理方案

今天在调整页面边距时,遇到这个问题,定义了float元素的li标签在设定margin-bottom时在IE6和IE7下会失效,即浮动元素贴近父元素的最后一行的元素(单行即指第1行)的margin-bottom值失效!今天问题得以解决,写文备忘! 问题代码:

ul{width:250px;border:1px #f00 solid; overflow:hidden;}
ul li{float:left;width:100px; height:35px; border:1px #00f solid;margin-bottom:10px;}

  • 测试margin-bottom
  • 测试margin-bottom
  • 测试margin-bottom
  • 测试margin-bottom

我是下面的元素

触发条件: 子元素设置浮动float,还加了margin-bottom值(父元素有加overflow:hidden清除浮动) 解决方法: 方法1:(会额外增加一清浮动的元素) 改变清除浮动的方式,代码如下:

.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;}

  • 测试margin-bottom
  • 测试margin-bottom
  • 测试margin-bottom
  • 测试margin-bottom

我是下面的元素

方法2:针对ie6/7给父元素加padding-bottom属性,其值等于子元素的margin-bottom的值 (强烈推荐!) 代码如下:

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;}

  • 测试margin-bottom
  • 测试margin-bottom
  • 测试margin-bottom
  • 测试margin-bottom

我是下面的元素

Read More