您的位置：首页 > 其它

浏览器兼容性经典问题（二） IE6 3像素bug问题

2012-11-16 11:36 225 查看

问题描述：

当相邻的两个元素，一个是浮动的，另一个非浮动，那么在IE6 下面将会产生3像素bug。

问题代码：

<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}

#left_box{
background:#1C86EE;
float:left;
height:100px;
width:100px;
}

#right_box{
background:#76EE00;
height:100px;
width:200px;
}
</style>
</head>

<body>
<div id="left_box"></div>
<div id="right_box"></div>
</body>
</html>

各浏览器效果图：

注释：

如上图（上中下分别是firefox chrome IE6）：

在firefox和chrome（包括IE8 IE9已测试）中，由于<div id="left_box">浮动了，所以脱离了文本流，导致了<div id="right_box">这个元素从头开始，所以蓝色覆盖在了绿色的上方。这是符合W3C标准的效果。

而在IE6则产生了著名的3像素bug，在相邻的像素中间产生了3个像素的空隙。

在IE7中（已测试），这个bug被修复了，消除了中间的3像素空隙。但是却不像firefox chrome那样符合W3C标准。

解决方法：

在各个浏览器下使得相邻的元素都是浮动的便可

代码如下：

<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}

#left_box{
background:#1C86EE;
float:left;
height:100px;
width:100px;
}

#right_box{
background:#76EE00;
height:100px;
width:200px;
float:left;   /*加上浮动便可*/
}
</style>
</head>

<body>
<div id="left_box"></div>
<div id="right_box"></div>
</body>
</html>

各浏览器效果图：

总结:

其实这个问题并不是特别的眼中以至于要用复杂的代码去解决它，只要你写出能符合W3C标准的效果代码变可以无形中解决这个问题。这里提出只是因为让大家更好的了解一下IE6下一些莫名其妙的事情罢了。

浏览器兼容性经典问题（一） IE6 下双边距问题

浏览器兼容性经典问题（三） IE6 不支持min-width属性

浏览器兼容性经典问题（四）更好的清除浮动

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航