IE6双边距bug及其解决办法

转载 2016年08月31日 15:13:42
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body,div{
 margin:0;
 padding:0;
}
#div1{
    width:200px;
 height:200px;
 background:#900;
 margin:20px 0 0 20px;
 float:left;
}
#div2{
 width:300px;
 height:200px;
 background:#009;
 margin:20px 0 0 20px;
 float:left;
}
</style>
</head>

<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>

上面这段代码,在IE6和FF中的显示结果分别如下图所示:

这里写图片描述

可以看到,在IE6中显示的红色区域的左边距实际为40px,是CSS代码中设置的20px的两倍,这是IE6的双边距BUG。当满足下面这三个条件时,就会出现这个BUG:

1、要为块状元素;

2、要左侧浮动;

3、要有左外边距(margin-left)。

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,则只有最靠近浮动方向的元素有双边距bug。

解决这个bug有两个方法:
1.给float的元素添加一个display:inline
2.给ie6写一个hack,其值是正常值的一半,即_margin-right:10px;这个方法不推荐,因为要加hack写法,而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。

浏览器兼容性经典问题(一) IE6 下双边距问题

问题描述:         一个div盒子如果设置了margin,并且该div设置了float浮动,那么在IE6下便会产生双边距问题:如果设置 float:left 那么左边距会是原来margin的...
  • speed_feng
  • speed_feng
  • 2012年11月15日 15:14
  • 4970

CSS中IE6下双边距BUG解决方案

其实这个问题在刚学习CSS的时候就知道怎样解决了,但是一直不知道为什么会出现这种现象,今天顺便记录一下。1.为什么会出现双边距BUG? body,div{padding: 0;margin:...
  • UniKylin
  • UniKylin
  • 2015年03月21日 17:26
  • 967

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

出现IE6双倍边距Bug触发的几个条件:        ①:是块元素;        ②:有左浮动;        ③:有左外边距。 解决办法:把相应的块元素转为内联元素,在相应的块元素中...
  • huangyibin628
  • huangyibin628
  • 2014年03月04日 16:49
  • 1811

IE6双边距bug*

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right...
  • weicy1510
  • weicy1510
  • 2017年04月06日 22:41
  • 214

css 黑客解决IE6,双边距问题

.span{width:10px;_width:5px;//用于IE6 }
  • phptripper
  • phptripper
  • 2011年04月12日 17:06
  • 560

IE 双边距Bug

 一、什么是双边距Bug?先来看图:我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现...
  • lzy_1515
  • lzy_1515
  • 2009年11月04日 17:14
  • 3931

IE6浏览器的bug问题及相关解决的方法

IE6浏览器的bug问题及相关解决的方法 1、css浮动边距加倍错误(双倍边距BUG)的解决办法   该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!!   解决方法:_disp...
  • sinat_36146776
  • sinat_36146776
  • 2016年10月11日 09:17
  • 834

【Html】双边距问题

IE6中双边距Bug:   发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。...
  • happyhaojie
  • happyhaojie
  • 2015年12月10日 04:17
  • 621

写出几种IE6 BUG的解决办法

双边距BUG:float引起的,使用display:inline(在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说,在与浮动同方向的空白边会加...
  • huajiongni9676
  • huajiongni9676
  • 2017年12月06日 09:35
  • 160

IE6下的双边距BUG

body{margin:0;} .wrap{float:left;border:2px solid #000;} .box{width:100px;height:100px;background:...
  • u012978671
  • u012978671
  • 2014年03月31日 22:01
  • 241
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE6双边距bug及其解决办法
举报原因:
原因补充:

(最多只允许输入30个字)