横向双倍外边距BUG — IE6盒模型

HTML5学堂：2015年，IE6已经黯然退市。不过，IE6的兼容问题，个人认为还是应当有所了解的。一方面，前端这个工作，并不能够仅仅了解现在，应当有一个较好的知识沉淀。另一方面，我们几个讲师一直将IE6作为辅助测试的工具-如果子级盒模型大小超出了父级大小，那么在IE6下必然是崩溃的。对于这种低级错误，虽然其他浏览器都能够处理和调整，但是却绝不是一个专业开发人员会犯的~

margin双倍间距bug

IE6存在不少的兼容问题，今天要说的是IE6的横向双倍外边距。

触发条件

当浮动元素的浮动方向和浮动边界的方向一致。此时用IE6查看网页，就会发现，设置的横向的边距变成了双倍。

例子：元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。

修正bug

只需要给浮动元素加上display:inline;的CSS属性就可以了。

欢迎沟通交流~HTML5学堂