当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素。
解决方案：
只要触发IE的hasLayout，非浮动元素就会拥有布局。
所以，利用IE6特有的hack规则，为它单独写样式就可修复此问题：_zoom:1;margin-left: value;_margin-left: value-3px;
zoom 是IE触发Layout条件之一，因为它是IE特有的CSS规则，所以采用zoom。margin-left: value-3px 是修复IE6 中3px 的bug。注：前面的下划线是专门写给IE7以下版本的hack！
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3像素bug</title>
<style>
.main{width:400px;margin:0;background:#ddd;}
.left{float:left;background:red; height:60px; width:150px;}
.right{ background:blue; height:60px; width:150px;}
#fix{_margin-right:-3px;}<!--前面的下划线是专门写给IE7以下版本的hack-->
</style>
</head>
<body>
<h2>3像素bug</h2>
<p>红色区域和蓝色区域有3像素空隙</p>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<h2>解决方案</h2>
<p>采用负外边距的方法，可解决该bug</p>
<div class="main">
<div class="left" id="fix"></div>
<div class="right"></div>
</div>
</body>
</html> |
在IE6中浏览的效果图如下：
