IE6双倍边距——IE布局BUG总结

　　前言：IE6双倍边距这个问题其实早在学习Css之初都已经知道如何解决，但当时只知道如何解决而并不知道引起这个BUG的原因是什么，再接下来工作过程中不断实践也终于明白是怎么回事了。但脑子始终不好使，索性上网把所有的IE6BUG 都收集整理下，作为我可怜的大脑的外挂硬盘储备。

1、问题：在IE6下如果某个标签使用了float属性，同时设置了其外补丁“margin:10px 0 0 10px”可以看出，上边距和左边距同样为10px，但第一个对象距左边有20px。

2、解决办法：当将其display属性设置为inline时问题就都解决了。

3、说明：这是因为块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距 就会出现这种情况。也许你会问：“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动，对象才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一个对象的，所以第二个对象在设置后不会出现问题。另外在一些特殊布局中，可能需要组合使用display:block;和display:inline;才能达到预期效果。当然最坏的情况下，我们就可以使用
，这种“标准属性;*IE7识别属性;_IE6识别属性”HACK方式解决。

4、总结：这个现象仅当块级对象设置了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。

上一篇: 汽车哪个座位最安全？
下一篇: 图片下边的多余空隙——IE布局BUG总结
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: css
相关日志: