为什么在IE6中两个相邻的div元素之间会出现3像素的间隙？

IE6 中的两个 div 之间出现间隙的问题被称为 IE 3px bug。

IE6 两个div有间隙的问题（IE 3px bug）

问题描述

在IE7中，两个div是紧挨着的，但在IE6中会出现两个div之间出现3px左右的间隙，这就是所谓的“IE 3px bug”。

解决方法

方法	描述	适用浏览器
浮动法	将第二个div的float设置为right	IE6+，FF 2.0+
负边距法	设置#left的margin-right为-3px	IE6
Overflow隐藏法	在某个div的css中增加overflow:hidden;	IE6和IE7

具体实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ChaiChunyan fixed ie 3px bug demo</title>
    <style type="text/css">
        #left {
            float: left;
            width: 200px;
            height: 100px;
            background: #f00;
        }
        #right {
            float: right;
            width: 200px;
            height: 100px;
            background: #fc0;
        }
    </style>
</head>
<body>
    <div id="left">left</div>
    <div id="right">right</div>
</body>
</html>

相关问题与解答

问题	解答
为什么在IE6下会有3px的间隙？	这是由于IE6对浮动元素的盒模型处理方式与其他浏览器不同导致的。
如何解决在包含父级div的情况下的3px间隙问题？	如果这两个div包含在另一个已经浮动的div中，使用overflow:hidden;的方法会更有效。

小伙伴们，上文介绍了“IE6 两个div有间隙的问题（IE 3px bug）”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。

为什么在IE6中两个相邻的div元素之间会出现3像素的间隙？