解决ie6下的双倍外边距问题

来自:互联网
时间:2018-08-13
阅读:

IE6下为什么会出现双倍外边距呢?这些都是IE特有的属性haslayout造成的,想知道原理的读者可以看下haslayout相关文章。

IE6双倍外边距出现的条件

当浮动元素的浮动方向和浮动边界的方向一致时才会出现。

元素向左浮动并且设置了左侧的外边距会出现双边距bug。

同理,元素向右浮动并且设置右边距也会出现双边距bug。

同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。

如何修复IE6双倍外边距BUG

只需要给产生双倍外边距的浮动元素增加display:inline;属性即可解决问题。

.floatbox {
float: left;
width: 300px;
height: 300px;
margin: 30px;
display: inline;
}
返回顶部
顶部