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浮动元素产生的“双边距”BUG问题及解决办法

先来看看什么是“双边距” 看图,绿色盒子在蓝色盒子上左浮动了float:left;,并且以左边的外边距为100px,margin-left:100px;这样显示是正常的,那么下面我们到IE6里面去看...

IE6 透明PNG图片BUG解决办法

png透明针对IE6一直是件挺麻烦的事情,使用的方法也是各有不同,大多的原理是用IE的滤镜来解决的。 语法: filter : progid:DXImageTransform.Microsof...

IE6 Select元素无法被div等元素覆盖的bug解决办法

在页面设计时,经常会使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可...

IE6中的常见BUG与相应的解决办法

开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论。其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望。本文主要讲解一些比较容易遇到的IE...

IE6fix的CSS沉底解决办法

  • 2012年03月26日 13:36
  • 1KB
  • 下载

针对ie6中的透明图片不是透明显示的解决办法

一些图片存在着浏览器的兼容性,本身是透明的图片在ie6中却是不透明,比如: 在ie6中的效果 正常显示的效果 针对以上情况只需要在代码...

ie6弹出框被select遮住解决办法

  • 2010年12月23日 14:49
  • 2KB
  • 下载

工作中遇到的IE6兼容性问题及解决办法

1. 解决IE6下元素左浮动自动换行的问题   解决:元素左浮动,宽度自适应;CSS:display: inline-block;overflow: hidden;white-space: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE6双边距bug及其解决办法
举报原因:
原因补充:

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