zoukankan      html  css  js  c++  java
  • IE6,7 margin-bottom失效bug

    问题描述:ie6/7浏览器下,浮动元素贴近父元素的最后一行的元素(单行即指第1行)的margin-bottom值失效!

    问题代码:

    <style type="text/css">

    ul{250px;border:1px #f00 solid; overflow:hidden;}
    ul li{float:left;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;0; height:0;display:block; overflow:hidden;}
    ul{250px;border:1px #f00 solid; overflow:hidden;}
    ul li{float:left;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{250px;border:1px #f00 solid; overflow:hidden;*padding-bottom:10px;}
    ul li{float:left;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>
     
     
    问题得以解决,写文备忘!
  • 相关阅读:
    Runoob-Java:Java 开发环境配置
    公司-科技:JotSpot
    服务-WiKi:WiKi
    国际组织-Java:JCP
    Java:Java 简介
    Runoob-Java:Java 教程
    oracle-ofa
    HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容
    Android studio怎么导入Recycler VIew
    Android studio怎么导入Recycler VIew
  • 原文地址:https://www.cnblogs.com/jameslong/p/3777809.html
Copyright © 2011-2022 走看看