IE 3 像素 Bug
Bug 描述：
在IE 6中，与浮动元素相邻的非浮动元素，会与浮动元素之间存在3像素的间距。
Bug 重现：
测试用例1代码如下：
<div>
<div style="float: left;width: 100px;height: 100px;border: 2px solid blue;"></div>
<div style="border: 2px solid red;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aspernatur assumenda autem consectetur eaque exercitationem
</div>
</div>
显示效果如下：
| 现代浏览器 | IE 6 |
|---|---|
 |
 |
仔细对比上面的两张图，你会发现在现代浏览器中红框的内容是紧紧贴着蓝色边框的，而在IE6中，红框的内容与蓝色边框之间是有间隙的，这个间隙就是3px。
到底在什么情况下会出现这3px呢？会不会和红框div有关系？我们进一步简化测试用例1的代码，把红框div去掉，让文字内容直接跟在浮动元素之后。
测试用例2代码如下：
<div style="float: left;width: 100px; height: 100px;border: 2px solid blue;"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aspernatur assumenda autem consectetur eaque exercitationem
显示效果如下：
| 现代浏览器 | IE 6 |
|---|---|
 |
 |
发现3px 依旧存在。那我们继续修改测试用例，看看给文字内容与浮动框之间添加间距，不让它们直接接触的情况下，3px是不是会消失。
测试用例3代码如下：
<div style="float: left;width: 100px; height: 100px;border: 2px solid blue;"></div>
<div style="border: 2px solid red;margin-left: 120px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aspernatur assumenda autem consectetur eaque exercitationem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aspernatur assumenda autem consectetur eaque exercitationem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aspernatur assumenda autem consectetur eaque exercitationem
</div>
其实就是在测试用例1的基础上，给红框添加了margin-left: 120px，使红框不再紧靠着蓝框，而是与蓝框保持一些距离。显示效果如下：
| 现代浏览器 | IE 6 |
|---|---|
 |
 |
我们发现即使不直接接触浮动元素，IE 6中还是存在3px。但是，请仔细观察IE 6中的效果图，发现什么问题没？或者看下面的局部放大图：
我们发现，红框里超出浮动元素高度的那部分内容与红边框之间是没有3px间距的。看到这，能想出IE 6到底是给谁加上的3px么？
Bug 分析：
很明显：IE 6给与浮动元素相邻的line box添加了3px间距，而且，只有在浮动元素高度范围之内line box 才会被添加3px 间距。
解决方案 ：##
解决方案第一步是让红框拥有layout（为了简单起见，这里用zoom:1来使其拥有layout）
测试用例4代码如下：
<div style="float: left;width: 100px;height: 100px;border: 2px solid blue;"></div>
<div style="border: 2px solid red;zoom:1;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aspernatur assumenda autem consectetur eaque exercitationem
</div>
显示效果如下：
| 现代浏览器 | IE 6 |
|---|---|
 |
 |
差别还是挺大的，我们一个个的分析。
先看现代浏览器，要想让红框不再与浮动元素重叠有两种选择：1，让红框产生BFC（有关BFC的内容以后详细说）。2，给红框添加margin-left:104px（需要把边框宽度4px考虑进去）。这里我们采用第二种方法。注意：这里的margin-left:104px在IE6中同样会起作用：使红框的左边框距离蓝框的左边框104px。
再看IE 6效果图，这次红框的内容与红色边框之间的3px消失了，可是红框与蓝框之间多了3px间距。我们要增加一条针对IE6的规则：给浮动元素添加margin-right:-3px（写到条件注释里）。而margin-right:-3px起作用的前提是：红框的margin-left值小于104px。
测试用例5代码如下：
显示效果如下：
| 现代浏览器 | IE 6 |
|---|---|
 |
 |
终于一致了。总结下解决方案：
- 触发红框hasLayout
- 给红框添加
margin-left，并在IE6中取消margin-left带来的影响 - 给浮动元素添加
margin-right:-3px(仅针对IE6)
参考文章：