网页前端IE-BUG系列-3像素缝隙错误，也称文本慢跑错误
受影响的IE版本
IE6
症状
紧接浮动元素的元素或者与浮动元素之间会有3像素的缝隙，或者会位于浮动元素下面，或者会在有数个浮动元素时保持这个3像素的偏移。
说明
这是一个颇为有趣的bug.在IE中haslayout属性为true的元素在浮动元素周围在不同情况下会有不同的表现。他们不愿屈居浮动元素之下，甚至都不愿触碰到浮动元素。实际上，为元素赋予’layout’是IE使其能包含浮动元素的方式。然而，这个bug有三种呈现方式。下面是demo:
BUG DEMO
HTML Code:
<div id="container">
<div id="bugger">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim">*cry*</div>
</div>
<div id="container2">
<div id="bugger2">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim2">*cry*</div>
</div>
<div id="container3">
<div id="bugger3">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim3">*cry*</div>
</div>
<div id="container4">
<div id="bugger4">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim4">*cry*</div>
</div>
CSS Code:
#container,
#container2,
#container3,
#container4 {
width: 500px;
overflow: hidden; /* just containing floats */
}
#bugger,
#bugger2,
#bugger3 {
float: left;
width: 300px;
background: #65A5E1;
}
#bugger3 {
background: none;
border-right: 1px solid #000;
}
#victim {
width: 200px;
margin-left: 300px;
}
#victim2 {
height: 1.5em; /* just to give "layout" */
margin-left: 300px;
}
#bugger4 {
float: right;
width: 300px;
}
#victim4 {
width: 200px;
margin-right: 300px;
}
我们一个个地分析这些demo。第一个demo中有三个元素：固定宽度的#container，它里面的浮动元素#bugger和另一个元素#victim,其左margin设置为#bugger元素的宽度。尽管你可能不会在专业代码中看到这些，但由于可以说为第二个孩子结点#victim设置宽度没有任何用处，而也正是这一点使这个bug更加突出,即添加宽度后#victim就位于浮动元素之下了。如果没有#victim{width:200px;},而haslayout仍为true,这个bug的呈现方式将是#victim和#bugger之间的3像素的缝隙，这可以从第二个demo也就是#container2看出来。最终，如果紧邻浮动元素的元素没有’layout’,这个bug将无从察觉。第三个demo,即#container3显示了这个效果。#victim3中的文本仍然偏移了3px,这说明这个bug会影响由文本，图像和类似元素产生的inline盒子，这个bug也因此而另外得名”Text jog Bug”.在第三个demo中，这个bug可能还没有这么明显。然而，如果用200px宽的图像替换文本，它会如同我们在第一个demo中看到的一样沉下去。看看最后一个demo，即#container4,很明显，就算将左浮动float:left改为右浮动float:right,这个bug依然存在。
解决方案
以下是按解决方案类型排列的解决方案：
条件注释方案
修复版本
所有受影响的版本
描述
尽管这个bug的修复有些像虎口夺食的情景，“把我的那块还给我”，但它真的很有效。
大家也注意到了，这些demo中的所有缝隙都是整整3px,这也是我们在修复中将要加以利用的，这些修复方法会随这个bug的呈现方式而有些微小的改变。
HTML Code:
<div id="container">
<div id="bugger">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim">*cry*</div>
</div>
<div id="container2">
<div id="bugger2">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim2">*cry*</div>
</div>
<div id="container3">
<div id="bugger3">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim3">*cry*</div>
</div>
<div id="container4">
<div id="bugger4">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
<div id="victim4">*cry*</div>
</div>
CSS Code:
#container,
#container2,
#container3,
#container4 {
width: 500px;
overflow: hidden; /* just containing floats */
}
#bugger,
#bugger2,
#bugger3 {
float: left;
width: 300px;
background: #65A5E1;
}
#bugger3 {
background: none;
border-right: 1px solid #000;
}
#victim {
width: 200px;
margin-left: 300px;
}
#victim2 {
height: 1.5em; /* just to give "layout" */
margin-left: 300px;
}
#bugger4 {
float: right;
width: 300px;
}
#victim4 {
width: 200px;
margin-right: 300px;
}
条件注释：
<!--[if lt IE 7]>
<style type="text/css">
#bugger,
#bugger2,
#bugger3 { margin-right: -3px; }
#bugger4 { margin-left: -3px; }
#victim,
#victim2 { margin-left: 0; }
#victim4 { margin-right: 0; }
</style>
<![endif]-->
上面的代码除了条件注释，与原始demo中的代码一样。条件注释会应用于所有低于IE7的IE版本匹配，它们也正是这个bug所影响的版本。
这个解决方案包含应用一个-3px到浮动元素上bug出现的那一边的margin。所以根据其float值，头三个demo中我们使用了margin-left,而最后一个demo我们使用了margin-right。
在我们的demo中使用的margin值为-3px的原因不是因为3的神奇而是因为其原始值为0.而需要传递给低于7的IE版本的值是比原始值小3.所以，如果我们已经在第一个demo中使用了#bugger{margin-right:30px}，我们应当在条件注释中使用#bugger{margin-right:27px}
修复方案的第二个部分,需要将#victim,#victim2和#victim4的margin设置为0.为什么呢，由于IE处理浮动元素周围有layout的元素的方式，从而在IE中，#victim , #victim2 , #victim4的margin将从#bugger的边沿开始而不是位于其下（在正常的浏览器中会沉下）。
#victim3上的margin并没有设置为0，因为它并没有’layout’,从而它会位于浮动元素下面。
本文地址：http://www.tuquu.com/tutorial/wd1420.html
