网页前端开发IE BUG系列之双边距BUG

该BUG影响IE版本 IE6

症状： 浮动元素上的左右边距是双倍的

说明

CSS的浮动属性被很多web开发者使用。不仅因为它能够让内容围绕在浮动元素的周围，而且在许多情况下可以通过设定浮动元素的边距来进行布局。IE开发者由于某些原因认为增加双倍边距是一个好的做法，所以这个bug被叫做“双边距Bug”。下面是这个bug的演示例子。

HTML Code:

<div id="container">
    123456789012345678901234567890 <br>
    <div id="inner">
        test
    </div>
</div>

CSS Code:

		#container {
    overflow: hidden; /* contain float - irrelevant to the bug */
}
    #inner {
        float: left;
        margin-left: 2em;
    }

在这个demo中，我们在#inner上同时使用了float和margin-left，触发了双边距bug。 根据字体，在正常的浏览器和ie7中，#inner的左边缘在数字4或5的附近。在IE版本低于7（在IE5，5.5和6测试）左边缘将在数字9或0的附近，表明了我们边距是双倍的。 如果你设置右边距在一个浮动元素上，这种情况同样会发生。你用margin-left或是简写去设置边距效果是一样的。

解决方案

解决方法非常简单。你只需要在那个被双边距bug影响的元素上加display: inline就可以了。下面是把解决方法应用于原来的demo：

HTML Code:

<div id="container">
    123456789012345678901234567890 <br>
    <div id="inner">
        test
    </div>
</div>

CSS Code:

		#container {
    overflow: hidden; /* contain float - irrelevant to the bug */
}
    #inner {
        float: left;
        margin-left: 2em;
        display: inline;
    }

和原来的demo没有多大的区别，但是bug不再出现了。添加display:inline解决这个bug是安全的，因为它被所有标准兼容的浏览器忽略。如果你觉得还有更好的方法的话，欢迎留言添加。