IE6 双倍水平外边距BUG以解决方案

来源：互联网发布：淘宝网的商业模式编辑：程序博客网时间：2024/05/22 08:37

出现条件：

1、没有设置display:inline的块元素

2、浮动元素

3、设置了水平外边距（浮动的方向和水平外边距设置的方向一致）

4、元素与父容器之间

备注：因为浮动都有其相对应的对象，只有相对于其父容器的浮动才会出现这样的问题。第一个元素是相对父容器的，而第二个是相对第一个兄弟元素的，所以第二个浮动元素不会出现双倍水平外边距问题。而且只有设置水平外边距的值才会出现双倍外边距，垂直外边距没有关系。

解决办法：给浮动块框设置display:inline解决问题

下面是测试代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>IE6 双倍水平外边距</title><style>*{margin:0;padding:0;}.testbox{background:#CCC;width:100px;height:100px;margin:10px 0 0 10px;float:left;display:inline;/*去掉display:inline在IE6下看看效果*/}</style></head><body><div class="testbox">IE6浮动双倍外边距</div><div class="testbox">IE6浮动双倍外边距</div></body></html>

原因分析：这个现象仅当块框设置了浮动才会出现，行内框浮动不会出现此问题。因为行内框默认display:inline，给其float后自动就具有块框特性，所以如果是span之类的行内框，浮动后是不需要再单独设置display:inline就可以自动消除双倍水平外边距。

下面是测试代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>IE6 双倍水平外边距</title><style>*{margin:0;padding:0;}.testbox{background:#CCC;width:100px;height:100px;float:left;margin:10px 0 0 10px;}</style></head><body><span class="testbox">IE6浮动双倍外边距</span><span class="testbox">IE6浮动双倍外边距</span></body></html>

总结一下：

如果默认的是块元素例如div之类的，在设置 float 后同时要置display:inline来解决IE6的双倍水平外边距；

如果默认是内联元素例如span之类的，那么浮动后是没有关系的，因其自身居右display:inline，所以不需要再重复添加该属性。