|
之前一段时间系统的学习了div+css之后，给公司的网站进行了div化，沾沾自喜之余感叹着自己的进步。但第二天老板跑过来问我，网站是不是还没更新好啊，怎么有那么多空白啊！我打开看，没有啊，无奈之下用ietest测试了一下，原来ie6下还真的有大片空白域。百思不得其解的我从html到css用之前学的知识整个分析了一遍，居然没发现任何问题。
后来搜索了不少教程我才认识到了作为一个菜鸟级的前端设计都会遇到的一个问题：IE6浮动双margin的bug，显然这显示了我对网页知识有多么匮乏，经过找原因找方法，终于解决了这个高手们不屑一顾的问题。
无知归无知，有进步总是好的，这里写一下关于IE6浮动双margin的bug的原因及解决办法，希望有天回头看看的时候能狠狠地嘲笑自己一把！
IE6下有一个著名的margin双倍bug
出现这个bug需要具备三个条件：
1、浏览器为IE6，大于IE6的ie系列版本和火狐等其他浏览器不会出现这个情况。
2、对象设置了float属性和宽度（可选），如.ILeft { float: left; width: 150px;}
3、对象设置了margin属性，如.ILeft { float: left; width: 150px; margin-left:
15px}
以上的class为ILeft的层在IE6下浏览就会出现左边距为30px的情况，而不是正常想象中的15px。
解决办法是
给对象的css属性加上 display:inline 即可解决该bug
代码：.ILeft { float: left; width: 150px; margin-left: 15px;
display:inline}。
再次刷新网页，在IE6下的margin双倍的bug就消失了
注意，：该bug只针对IE6有效（但愿此类bug越少越好）
IE6双倍边距bug解决方法
2011.5.30号引用博客：http://blog.csdn.net/twosecond/archive/2009/06/24/4295879.aspx
前言：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、总结：这个现象仅当块级对象设置了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。
|
