常见浏览器bug(针对IE6及更低版本)及其修复方法

常见bug及其修复方法有以下几种

1、双外边距浮动bug

双外边距浮动bug在IE6及更低版本中常见。所谓双外边距浮动bug是指使任何浮动元素上的外边距加倍。（见下图）

 

只要将元素的display属性设置成inline就行了。因为元素时浮动的，所以将display属性设置为inline实际上不会影响显示方式。但是，这似乎会阻止Windows上的IE6及更低版本将所有外边距加倍。所以每当对具有水平外边距的元素浮动时，都应该很自然的将display属性设置为inline,以备外边距将来被加大。

2、3像素文本偏移bug

Windows上IE5和IE6非常常见的bug是3像素的文本偏移bug.当文本与一个浮动元素相邻时，这个bug就会表现出来。例如，将一个元素向左浮动，并且不希望相邻段落中的文字围绕浮动元素。你可能会在段落上应用一个宽度等于浮动元素的宽度的外边距。

 

.myFloat{
float:left;
width:200px:
}
p{
margin-left:200px;
}

 

 

 

但这样做就会在文本和浮动元素之间莫名其妙出现一个3像素的间隙。一旦浮动元素停下来，3像素就会消失（如下图）。

解决方法是（1）设置一个小的高度并不会影响元素在这些流浪器中的实际尺寸；（2）将外边距重新设置为零；（3）在浮动元素上设置一个负的3像素右边距；

p{
height:1%;
margin-left:0
}
.myFloat{
margin-right:-3px;
}

 

如果浮动元素是图片时，还需要改变图像的外边距。

/*IE5.x在图像的左右都添加了3像素的间隙，所以需要改变图像的外边距*/
p{
heigth:1%;
margin-left:0;
}
img.myFloat{
margin:0 -3px
}

/*应用于IE6的样式表*/
p{
height:1%;
margin-left:0;
}
img.myFloat{
margin:0;
}

 

3、IE6的重复字符bug

所谓重复字符bug就是在某些情况下，一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。

当在一系列浮动的元素的第一个和最后一个元素之间有多个注释就会出现这个bug.前两个注释没有影响，但是后续的几个注释会导致两个字符重复出现。3个注释会导致两个字符重复，4个注释会导致4个字符重复，5个字符会导致6个字符重复。

避免这个bug的最容易、最安全的方法是从HTML代码中将注释删除掉。

4、IE6中的”藏猫猫“bug

出现这个bug的条件是：一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，但其实隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。

解决方法是避免清理元素与浮动元素接触。这里给出三种方法：（1）给容器元素应用特定的尺寸；（2）给容器指定行高；（3）将浮动元素和容器元素的position属性设置为relative;

5、相对容器中的绝对定位

这些bug的原因在于相对定位的元素没有获得IE/Win的内部hasLayout属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对与视口进行定位。

解决方法是需要迫使相对定位的容器拥有布局。一种方法是在容器上显示地设置width和height。（在不知道容器的width和height情况下，或需要这些属性保持灵活的情况下使用。）

另一种方法是为容器设置一个小的高度不影响实际高度。

 

.container{
height:1%;
}