在IE6中的两个div都使用float:left; 是不是会有10px的默认边距?所以才会造成IE6中的双倍边距问题

在IE6中的两个div都使用float:left; 是不是会有10px的默认边距?所以才会造成IE6中的双倍边距问题

前言:IE6双倍边距这个问题其实早在学习CSS之初都已经知道如何解决,但当时只知道如何解决而并不知道引起这个BUG的原因是什么,再接下来工
作过程中不断实践也终于明白是怎么回事了。但最近开发项目逐渐转移到以IE7为IE的基础参考标准后,逐渐有点淡忘IE6下的一些诡异BUG的解决方案
了,就是知道如何解决也忘了部分理论知识了。

1、问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px
0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。
2、解决办法:当将其display属性设置为inline时问题就都解决了。
3、说明:这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对象的,所以第二个对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline;才能达到预期效果。

当然最坏的情况下,我们就可以使用"margin:10px
0 0 10px;*margin:10px 0 0 10px;_margin:10px 0 0 5px",这种“标准属性;*IE7识别属性;_IE6识别属性”HACK方式解决。4、总结:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。
温馨提示:内容为网友见解,仅供参考
第1个回答  2012-12-28
不是,是使用了float:left; 然后又有margin的时候造成双倍问题 可以给浮动元素加上 display:inline;来避免此问题
第2个回答  2012-12-28
不是的,是当浮动后,你给设置外边距的第一个元素,会有这个问题
第3个回答  2012-12-28
IE6双边距出现的问题是两个元素同时浮动然后第二个元素给了边距才会出现双浮动的,如果两元素不双浮动不加任何边距只会出现3像素漫移这种情况,解决的方向都是加一个display:inline。如果对dispaly:inline不熟悉的话可以参考一下我回答的这个问题!
http://zhidao.baidu.com/question/508639518.html追问

我就是想知道那个多出来的10px是怎么多出来的

本回答被提问者采纳
第4个回答  2012-12-28
你不给第一个元素的margin-left 设值就不会出现双倍边距的问题了,可给父级设置padding-left的值效果一样
相似回答