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

你对于margin双倍边距Bug问题是否熟悉，这里和大家分享一下IE6下margin双倍边距Bug的处理办法，相信本文介绍一定会让你有所收获。

创新互联，专注为中小企业提供官网建设、营销型网站制作、响应式网站开发、展示型成都网站建设、成都网站制作等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

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

一、什么是双边距Bug？

先来看图：

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

以下为引用的内容：

 
 
 
 
  
  
  
  
.floatbox{  
  
  
  
  
float:left;  
  
  
  
  
width:150px;  
  
  
  
  
height:150px;  
  
  
  
  
margin:5px05px100px;  
  
  
  
  
/*外边距的***一个值保证了100像素的距离*/  
  
  
  
  
}  
  
  
  
  
 
 
 
 

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

二、怎么会这样？

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

三、如何修正这个Bug？

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

CSS代码如下：

以下为引用的内容：

 
 
 
 
  
  
  
  
.floatbox{  
  
  
  
  
float:left;  
  
  
  
  
width:150px;  
  
  
  
  
height:150px;  
  
  
  
  
margin:5px05px100px;  
  
  
  
  
display:inline;  
  
  
  
  
}  
 
 
 

【编辑推荐】

1. Firefox下margin-top失效解决技巧
2. CSS中margin边界叠加问题及解决方案
3. CSS样式表高效使用八大秘诀
4. 创建和插入CSS样式表秘笈
5. 实现CSS垂直居中的五大方法及优缺点

网站名称：IE6下margin双倍边距Bug处理办法
标题来源：http://www.mswzjz.cn/qtweb/news49/99299.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能