IE6下为什么会出现双倍外边距呢?这些都是IE特有的属性haslayout造成的,想知道原理的读者可以看下haslayout相关文章。
IE6双倍外边距出现的条件
当浮动元素的浮动方向和浮动边界的方向一致时才会出现。
元素向左浮动并且设置了左侧的外边距会出现双边距bug。
同理,元素向右浮动并且设置右边距也会出现双边距bug。
同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。
如何修复IE6双倍外边距BUG
只需要给产生双倍外边距的浮动元素增加display:inline;属性即可解决问题。
.floatbox { float: left; width: 300px; height: 300px; margin: 30px; display: inline; }