IE6下margin双倍边距Bug的处理办法

本是古典何须时尚 2022-08-07 06:46 198阅读 0赞

一、什么是双边距Bug？

先来看图：

![Center][]

我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且 要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：

<table style="color:rgb(0,0,0); orphans:2; widows:2; font-size:13px; margin:0px; padding:0px; border:1px solid rgb(0,153,204); border-collapse:collapse; word-break:break-word; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:19.5px; table-layout:fixed; background-color:rgb(254,254,242)"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse; word-wrap:break-word"> <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(255,0,0)">以下为引用的内容：</span><br style="margin:0px; padding:0px"> .floatbox {&nbsp;<br style="margin:0px; padding:0px"> float: left;&nbsp;<br style="margin:0px; padding:0px"> width: 150px;&nbsp;<br style="margin:0px; padding:0px"> height: 150px;&nbsp;<br style="margin:0px; padding:0px"> margin: 5px 0 5px 100px;&nbsp;<br style="margin:0px; padding:0px"> /*外边距的最后一个值保 证了100像素的距离*/&nbsp;<br style="margin:0px; padding:0px"> }</td> 
  </tr> 
 </tbody> 
</table>

很简单，对吧？但是当我们在IE6中查看时，会发现左侧外边距100像素，被扩大到200个像素。如下图：

![2011012520002984.png][]

二、怎么会这样？

说实话，这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才 会出现。如同上面的例子一样，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一 行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。

三、如何修正这个Bug？

很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单？对，就这么简单。如下图：

![2011012520003993.png][]

CSS代码如下：

以下为引用的内容：  
.floatbox \{   
float: left;   
width: 150px;   
height: 150px;   
margin: 5px 0 5px 100px;   
display: inline;   
\}

块元素默认前后都有换行，float的目的是消除块元素的前后换行，让并列的块元素显示在一条线上，当并列的块元素显示在一条线上时，双倍边距只影响左边或右边第一个块元素，而如果因为其他原因(比如宽度超出最大宽度块元素出现换行)，双倍边距影响每一行左边或右边第一个块元素。

[Center]: /images/20220805/a0fea1c4b6d84733a48cdb4c5858680f.png
[2011012520002984.png]: /images/20220805/34fa51cf36644b4599c7dc942feb000e.png
[2011012520003993.png]: /images/20220805/a1c7f5c5382041fc959e8a8d5e7e903c.png