IE6中的 bug —— 双外边距

前言

今天做好了第二个 psd to html —— eCommerce，做好的第一步当然是检测兼容性了。于是我习惯的打开了 IETESTER。IE8、9、11 成功通过，IE7 不知道怎么回事，突然打不开了，连默认的主页都打不开，可能哪里出现问题了。

不纠结这个，IE6 中出现问题了，之前 crafty 的也存在这样的问题的，当时我没有注意，现在得好好解决一下了，不然会一直出现这样的 bug。

虽说 IE 已经被微软公开宣布放弃，更何况更早的 IE6 呢。但是，不得不承认的是，一段时间内，中国还是会有很多的人使用 IE 浏览器，而且一部分人仍将使用 IE6。而且，市场上基于 IE 运行的浏览器也多不胜数。

下面来一张官方的数据（来自百度统计）：

image.png

不多说了，说多了都是泪，说点实际的话题吧。

双外边距

不是所有的边距都可以成为双外边距的。

为了下面的代码部分不重复，先贴上 style 部分的代码，和 body 部分的代码：

<style type="text/css">
    * {
        margin:0;
        padding:0
    }
    .div1 {
        width:200px;
        margin:0 auto;
        border:1px solid #000000
    }
    .div1 .div2 {
        width:100px;
        height:100px;
        background:#ff0000;
        margin:30px
    }
</style>
<div class="div1">
    <div class="div2"></div>
</div>

在 IE6 中，如果单纯的设置 margin 是不会引起 IE6 的双外边距的 bug 的，如下图：

image.png

当同一个标签，既有 float，又有 margin 时，就会引起 IE6 的双外边距的 bug ，如下图：

.div1 {
    width:200px;
    margin:0 auto;
    border:1px solid #000000;
    overflow:hidden;
    *zoom:1
}
.div1 .div2 {
    width:100px;
    height:100px;
    background:#ff0000;
    margin:30px;
    float:left
}

image.png

解决方法

目前，我找到的唯一一个方法就是给浮动元素加 display:inline;，这样能够解决 IE6 下的双外边距。（方法来自： mrcoke的小屋 http://www.cnblogs.com/mrcoke/）

.div1 .div2 {
    width:100px;
    height:100px;
    background:#ff0000;
    margin:30px;
    float:left;
    display:inline
}

image.png

但让我很纳闷的是，他的下外边距没有了，这个就让我很无奈。找了很久，最终发现是浮动的问题，换成 clear:both; 的方法就好了。

<div class="div1">
    <div class="div2"></div>
    <div style=”clear:both;”></div>
</div>

说一下优点吧，可以很好的解决兼容性的问题，但是，如果遇到 ul li 的话，就不好解决了。

一个自己的方案(存在掣肘)

掣肘就在于，如果明确需要外边距，那么这个解决方案就不可以了(貌似给外面的盒子加一个内边距就可以了)。

由于双外边距只会存在于最左边的元素，所以，我们可以将最左边的元素的 margin 设置为 0 ，如果我们需要浮动的元素占据了好几行的话，我们就要对每一个最左的元素进行外边距的操作(这算是另一个的掣肘吧)。

同样的，也存在下边距失效的 bug ，和上面的解决方案一样。

感悟

IE 仍然困扰着 web 前端的攻城狮们，我们需要足够的知识，足够的技术，去解决每一个需要解决的 bug。

如若有更完美的解决方案，还望告知。