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>
     
     
    问题得以解决,写文备忘!
  • 相关阅读:
    设计模式一 Simple Factory, Factory Method, Abstract Factory以及Builder模式简述
    SQL Server中对XML操作
    开发常用小工具介绍
    强制休息程序 EyeGuardian 眼睛守护者 Beta测试版
    定时计划任务方案比较以及通过脚本创建计划任务(SchTasks命令)
    在Myeclipse中配置Maven
    Jena的环境配置
    0x01_go代码简单示例
    0x00_go语言安装
    信息收集工具
  • 原文地址:https://www.cnblogs.com/jameslong/p/3777809.html
Copyright © 2011-2022 走看看