IE6双倍margin bug
IE6双倍margin bug也就是IE6双倍外边距bug是 IE6 最著名的bug之一。它出现条件是：父元素与子元素之间，子元素同时设置了浮动和外边距属性，子元素会出现此bug，兄弟元素之间则不会。看实际例子能更好的理解：
XHTML代码：
<div id="box">
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
CSS代码：
*{
margin:0;
padding:0;
}
#box{
width:500px;
height:500px;
margin-left:20px;
background:#ff0000;
float:left;
}
#left{
width:200px;
height:400px;
background:#CCCCCC;
float:left;
margin-left:20px;
}
#right{
width:200px;
height:400px;
background:#3366CC;
float:left;
margin-left:20px;
}
#footer{
clear:both;
margin-left:20px;
background:#00FF00;
}
margin:0;
padding:0;
}
#box{
width:500px;
height:500px;
margin-left:20px;
background:#ff0000;
float:left;
}
#left{
width:200px;
height:400px;
background:#CCCCCC;
float:left;
margin-left:20px;
}
#right{
width:200px;
height:400px;
background:#3366CC;
float:left;
margin-left:20px;
}
#footer{
clear:both;
margin-left:20px;
background:#00FF00;
}
查看效果（用 IE6 查看）
解决的办法是给给子元素加上 display:inline 属性。如上例子给#left加上 display:inline 属性。
