IE6下margin双倍边距Bug的处理办法

本文介绍了一个在IE6中出现的双边距Bug现象,该Bug会导致浮动元素的外边距翻倍。文章详细解释了该问题的原因及触发条件,并提供了一个简单的解决方案——通过设置display:inline;来修正。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、什么是双边距Bug?

先来看图:


我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且 要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:

 

以下为引用的内容:
.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
/*外边距的最后一个值保 证了100像素的距离*/ 
}

很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:

二、怎么会这样?

说实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才 会出现。如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一 行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。

三、如何修正这个Bug?

很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:

 

CSS代码如下:

 

以下为引用的内容:
.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
display: inline; 
}


块元素默认前后都有换行,float的目的是消除块元素的前后换行,让并列的块元素显示在一条线上,当并列的块元素显示在一条线上时,双倍边距只影响左边或右边第一个块元素,而如果因为其他原因(比如宽度超出最大宽度块元素出现换行),双倍边距影响每一行左边或右边第一个块元素。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值