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

最新推荐文章于 2022-05-05 20:13:59 发布

speed_feng

最新推荐文章于 2022-05-05 20:13:59 发布

阅读量3.7k

点赞数

分类专栏： web前端文章标签： ie IE web前端浏览器

本文链接：https://blog.csdn.net/speed_feng/article/details/8190048

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述：

当相邻的两个元素，一个是浮动的，另一个非浮动，那么在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>

各浏览器效果图：