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

最新推荐文章于 2021-04-01 09:56:45 发布

speed_feng

最新推荐文章于 2021-04-01 09:56:45 发布

阅读量7.9k

点赞数 2

分类专栏： web前端文章标签： web前端

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

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述：

一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right，那么右边距会是原来margin的两倍。

代码如下：

    <html>
              <head>
                      <style>
                            body{
                                    margin:0px;
                                    padding:0px;
                            }
                            #box{
                                    float:left;
                                    margin:10px;
                                    width:200px;
                                    height:200px;
                                    background:#696969;
                            }
                      </style>
              </head>
              <body>
                       <div id="box"></div>
              </body>
    </html>

如下是各浏览器的效果图（左侧为chrome 中间为firefox 右侧是IE6）：

从上面图中可以看到，最右侧的IE6的左边距是原本边距的2倍。

解决方法：

在2004年以前，IE6这个双边距问题一直没有得到一种很好的解决方法，普遍的做法是把边距设置为目标边距的1/2，以错对错的方法去实现。2004年之后，有一个工程师发现了一个简单的解决方法，到现在也是一直用这个方法来消除IE6双边距问题的。方法很简单：只需要给id为box的这个div加上一条简单的css代码就够了。

解决代码：

 <html>
              <head>
                      <style>
                            body{
                                    margin:0px;
                                    padding:0px;
                            }
                            #box{
                                    _display:inline;
                                    float:left;
                                    margin:10px;
                                    width:200px;
                                    height:200px;
                                    background:#696969;
                            }
                      </style>
              </head>
              <body>
                       <div id="box"></div>
              </body>
    </html>

如下是IE6的测试效果图：

备注：

只需要加上" _display:inline; "就可以了。因为在IE7以及IE7以上的IE版本中，这个双边距的bug已经修正，前缀符号"_"只有IE6能够识别，所以只需要让IE6去设置这个属性就足以。

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

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

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

speed_feng

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
浏览器兼容性经典问题（一） IE6 下双边距问题

问题描述：一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right，那么右边距会是原来margin的两倍。代码如下：
复制链接

扫一扫