一,什么是双边距BUG
例如:我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度:
1.png
要实现这样的效果,我们给绿色盒模型应用以下CSS属性:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
//外边距的最后一个值保证了100px的距离
}
看起来很简单,但是当我们在IE6查看时,却会发现左边距的100px, 被扩展到了200px!如下:
2.png
二,为什么会这样?
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,则只有最靠近浮动方向的元素有双边距bug。
三,如何解决?
很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。如下图
3.png
CSS代码如下:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
没错,就是这么简单啦~
网友评论