IE6的3像素BUG

来源：互联网发布：杨幂网络暴力事例编辑：程序博客网时间：2024/04/28 14:32

IE6的3像素BUG

1. 什么事IE6的3像素BUG？下面我们做个试验:

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>IE6的3像素BUG</title>

div{background:#cccccc;}

#first{float:left;width:100px;height:100px;}

#second{clear:left;float:left;margintop:10px;width:100px;height:100px; }

#third{width:200px;margin-left:100px; height:310px; }

</style>

</head>

<body>

</body>

</html>

在IE6.0中：

在IE8.0中：

理论上左边部分也就是#first和#second宽度是100px， #third的margin-left:100px，显示应该是IE8.0中那样没有缝隙，但是IE6.0却不知道因为什么产生了一个3px的间距，这就是IE6的3像素BUG。

2. 如何解决IE6的3像素BUG？

代码如下：

div{background:#cccccc;}

#first{float:left;width:100px;height:100px;_margin-right:-3px;}

#second{clear:left;float:left;margin-top:10px;width:100px;height:100px;_margin-right:-3px;}

#third{width:200px;margin-left:100px; height:210px;_margin-left:97px;}

在IE6.0中：

在网络上也看到一些解决方案，一次尝试如下代码：

1）

#first{zoom:1;float:left;width:100px;height:100px;_margin-right:-3px;}

#second{zoom:1;clear:left;float:left;margin-top:10px;width:100px;height:100px;_margin-right:-3px;}

#third{width:200px;margin-left:100px; height:210px;}

2）

#first{_zoom:1;float:left;width:100px;height:100px;_margin-right:-3px;}

#second{_zoom:1;clear:left;float:left;margin-top:10px;width:100px;height:100px;_margin-right:-3px;}

#third{width:200px;margin-left:100px; height:210px;}

3）

#first{float:left;width:100px;height:100px;}

#second{clear:left;float:left;margin-top:10px;width:100px;height:100px;}

#third{zoom:1;width:200px;margin-left:100px;height:210px;_margin-left:97px;}

4）

#first{float:left;width:100px;height:100px;}

#second{clear:left;float:left;margin-top:10px;width:100px;height:100px;}

#third{_zoom:1;width:200px;margin-left:100px;height:210px;_margin-left:97px;}

5）

#first{float:left;width:100px;height:100px;_margin-right:-3px;}

#second{clear:left;float:left;margin-top:10px;width:100px;height:100px;_margin-right:-3px;}

#third{width:200px;margin-left:100px; height:210px;}

6）

#first{float:left;width:100px;height:100px;}

#second{clear:left;float:left;margin-top:10px;width:100px;height:100px;}

#third{width:200px;margin-left:100px;height:210px;_margin-let:97px;}

都不能够如愿以偿，如果哪位高手发现我的代码哪里有问题，还请多多指教，非常感谢！

3. 第二个元素也用float可以有效的避免IE6的3像素BUG

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>IE6的3像素BUG</title>

div{background:#cccccc;}

#first{float:left;width:100px;height:100px;}

#second{float:left;width:100px;height:100px;}

</style>

</head>

<body>

</body>

</html>

在IE6.0中：

1. 但是如果第二个元素不是float的，就会显示出IE6的3像素BUG：

#first{float:left;width:100px;height:100px;}

#second{margin-left:100px;width:100px;height:100px;}

0 0