今天中午休息时, 公司客服突然报出来一个bug, 一个用ie6的用户打开我们活动网站时, 发现内容都错乱了, 我赶紧上线一看, 发现是正常的. 找了台ie6的xp机器再看了下, 重现出了这个用户的问题, 发现确实如此.
检查了一遍代码, 发现没有什么问题, 测来测去发现也只有ie6会这样, 而且距离始终多了一倍! 百思不解于是就上网搜了下, 发现原来是因为"大名鼎鼎"的ie6margin双倍bug.
解决方案:
解决方案还简单, 只要给对象的css属性加上 display:inline 即可解决该bug.
原理:
出现这个bug需要具备三个条件：
1.浏览器为IE6，大于IE6的ie系列版本和火狐/Chrome等其他浏览器不会出现这个情况。
2.对象设置了float属性和宽度（可选），如 { float: left; width: 150px;}
3.对象设置了margin属性，如 { float: left; width: 150px; margin-left: 15px}
设置以上属性的层在IE6下浏览就会出现左边距为30px(双倍)的情况，而不是正常想象中的15px。
这是因为块级对象默认的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方式解决。
ps: 这个现象仅当块级对象设置了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。