IE6关于浮动、margin-bottom的兼容问题

最新推荐文章于 2022-03-08 14:57:44 发布

阿托斯之棍

最新推荐文章于 2022-03-08 14:57:44 发布

阅读量4.1k

点赞数

本文链接：https://blog.csdn.net/zhangxiangyu0731/article/details/8165493

版权

另一个IE6关于浮动、margin-bottom的兼容问题收藏
在做页面的时候遇到如下问题：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
    /* clearfix */
    * html .clearFix {display: inline-block;}
    *+html .clearFix {display: inline-block;}
    .clearFix:after {height: 0;visibility: hidden;content: ".";display: block;clear: both; line-height:1.2;}
    ×{ list-style-type: none; margin: 0; padding:0;}
    .outbox { width: 500px; margin: 0 auto; background-color: #39C;}
    .floatL { float: left; width: 200px; margin: 0 10px 20px 0; background-color: #C63; overflow: hidden;}
    .clear{ clear: both;}
</style>
<body>
<div class="outbox">
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="clear"></div>
</div>
</body>
</html>

bug:　　FF:最后一个li的margin-bottom正常显示

ie6,7:最后一个li的margin-bottom无效

在网上找了相关的方法解决方法如下：

<div class="outbox">
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="floatL">文字<br />文字<br />文字</div>
    <div class="clear"></div>// 清除浮动后 ie6,7:最后一个li显示就正常
</div>

网上找到的解决方法如下：

这是我在做目前这个wordpress主题的时候碰到的问题，条件比较苛刻，以至于后来bug再现时花了不少功夫。也不知道如何归纳这个bug，就把情况列在下面，以供分享吧。

先看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
    /* clearfix */
    * html .clearFix {display: inline-block;}
    *+html .clearFix {display: inline-block;}
    .clearFix:after {height: 0;visibility: hidden;content: ".";display: block;clear: both; line-height:1.2;}
    ul,li { list-style-type: none; margin: 0; padding:0;}
    .ulbox { width: 500px; margin: 0 auto; background-color: #39C;}
    ul { zoom: 1;}
    .ulbox li { float: left; width: 200px; margin: 0 10px 20px 0; background-color: #C63; overflow: hidden;}
    .ulbox li.mb20 { margin-bottom: 20px;}
    .ulbox li span { display: block;}
    .btm { clear: both; background-color: #C60;}
</style>
<body>
    <div class="ulbox">
        <ul class="clearFix">
            <li>文字<br />文字<br />文字</li>
            <li>文字<br />文字<br />文字</li>
            <li>文字<br />文字<br />文字</li>
            <li>文字<br />文字<br />文字</li>
            <li>文字<br />文字<br />文字</li>
        </ul>
    </div>
</body>
</html>

在ie6下查看这个文件的效果可以发现，除了第一组文章外，其他文章的标题与内容之间的边距很奇怪的变成了100px（如图）。

经过测试后发现，是由于第一排标题的h1和span浮动后造成的ie6对margin-bottom的解释出现了重复，具体原因不详，希望有大虾予以指点。加上背景颜色（点击这里查看效果。）后的表现更加怪异，连margin-bottom的位置都被渲染了颜色，及其不解。

现在发现的解决方法有以下几种：

1.给div加上width或height属性。

2.给div加上ie6专用的zoom:1;以触发layout。

3.取消h1或span上的浮动，或是给h1和span的同一行加上一个非浮动的隐藏标签，比如<span> <span>用于占据空间。

IE6/IE7下margin-bottom失效兼容解决办法

IE6/IE7下margin-bottom失效解决办法：

1、用padding-bottom代替；

2、在父标签中加入overflow:hidden；或zoom:100%

示例代码：

.body{}

.body ul{ margin:8px;} /*此时margin-bottom无效*/

.body{}
.body ul{margin:8px;overflow:hidden;zoom:100%;} /*此时margin-bottom有效,overflow与zoom任意加一个都可以*/

其实：margin-top可在里层写，而margin-bottom要在效果的最外层。否则在ie7没效果。ie6,8可以有。