IE6双倍margin值的bug出现条件及解决办法

之前一段时间系统的学习了div+css之后，给公司的网站进行了div化，沾沾自喜之余感叹着自己的进步。但第二天老板跑过来问我，网站是不是还没更新好啊，怎么有那么多空白啊！我打开看，没有啊，无奈之下用ietest测试了一下，原来ie6下还真的有大片空白域。百思不得其解的我从html到css用之前学的知识整个分析了一遍，居然没发现任何问题。

后来搜索了不少教程我才认识到了作为一个菜鸟级的前端设计都会遇到的一个问题：IE6浮动双margin的bug，显然这显示了我对网页知识有多么匮乏，经过找原因找方法，终于解决了这个高手们不屑一顾的问题。

无知归无知，有进步总是好的，这里写一下关于IE6浮动双margin的bug的原因及解决办法，希望有天回头看看的时候能狠狠地嘲笑自己一把！

这就是IE6下有一个著名的margin双倍bug

出现这个bug需要具备三个条件：

• 浏览器为IE6，大于IE6的ie系列版本和火狐等其他浏览器不会出现这个情况。
• 对象设置了float属性和宽度（可选），如.ILeft{float:left;width:150px;}
• 对象设置了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越少越好）