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>
     
     
    问题得以解决,写文备忘!
  • 相关阅读:
    Educational Codeforces Round 59 (Rated for Div. 2)E. Vasya and Binary String 区间dp
    MySQL语法大全
    D. Buy a Ticket(优先队列+dijkstra)
    Two Sets(并查集分类)
    KMP浅显易懂
    深度理解链式前向星
    快速幂(幂运算取模的logn算法)
    hdu---1950---Bridging signals解题报告(求Lis n*logn贪心+二分搜索)
    dp背包
    线段树模板
  • 原文地址:https://www.cnblogs.com/jameslong/p/3777809.html
Copyright © 2011-2022 走看看