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

问题描述:

        一个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属性

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


阅读更多
文章标签: web前端
个人分类: web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭