完美解决IE6中双边距BUG问题

一,什么是双边距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;
 }

没错,就是这么简单啦~

你可能感兴趣的:(完美解决IE6中双边距BUG问题)