
最近有很多人问我:在IE6下设置了几个标签的float和margin属性,但左边距明明设的是5px,怎么出来后就变成了10px,而在FireFox下就,没问题。在解释了这是典型的IE6的双倍边距BUG的现象之一后,并帮助那位朋友解决了问题。
其实,IE6的双倍边距BUG也常常是捆扰初学者的一个难题。下面我总结一下此BUG的现象和解决办法。
第一种,也是最常见的一种就是上面说到的,设置了浮动(float)后再设置外边距(margin),外边距就会是原来值的2倍。请看下面的代码:
1、问题:从上面例子中“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。
2、解决办法:当将其display属性设置为inline时问题就都解决了。
3、说明:这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对象的,所以第二个对象在设置后不会出现问题。
4、总结:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。
第二种,也是比较常见的一种。当对象1设置了左浮动,对象2在不设置取消浮动的情况下会浮在对象1的右边。但当对象2不设置浮动时,二者之间会出现空隙。请看下面的代码: