IE6常见兼容性问题

1.双边距

左右浮动的块元素在设定了对应方向的的margin值时，会产生双倍的边距。

解决方法：给元素添加 _display: inline;

 

2.双倍缩进

inline-block和text-indent样式同时使用时，会使缩进的尺寸加倍。

解决方法：不使用inline-block样式；给元素添加float样式；设置line-height，并添加overflow: hidden样式

 

3.float换行

不浮动的元素和浮动的元素并列在一起，浮动的元素会出现换行的现象。

解决方法：给不浮动的元素添加浮动的样式(前提是外层的容器有足够的宽度)

 

4.绝对定位的元素bottom错位

设置height的relative元素，如果内部包含absolute元素并且用bottom定位的话，会出现错位。

解决方法：为relative元素添加 zoom:1 样式或设定高度数值

 

5.overflow:hidden失效

子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden

解决方法：在父元素中使用position:relative;

 

6.无法定义1px高度的容器

解决方法： 添加overflow: hidden 样式

 

7.100%高度不起作用

一个元素即使设置了height: 100%也无法继承父级元素的高度。

解决方法：定义父级元素的高度；

 

8.select遮挡div的bug

解决方法：

使用iframe包住select，设置div的z-index比iframe的z-index大；

在div中建立一个跟div同宽同高的绝对定位的iframe，并且z-index比div要小。

9.z-index的bug

在IE6中，定位元素的z-index层级是取决于各自的父级容器的z-index，所以会导致不同级别的元素高z轴地元素无法遮挡低z轴的元素。

解决方法：

给父级元素定义z-index(如果不同级别的元素进行层级遮挡，需要给它们的相同级别的祖先元素设置z-index)

 

10.文本重复bug

在IE6中，一些隐藏的元素(注释、display:none;的元素)被包含在一个浮动元素里，就有可能引发最后一个元素文本重复的bug。 

解决办法：给浮动元素添加display:inline;删除注释；添加清浮动的元素clearfix

 

11.不支持position: fixed

ie6下给元素的position设置为fixed会不起作用，无法固定一个元素

解决方法：

添加以下样式

*html{

    _background-image:url(about:blank);

    _background-attachment:fixed

}

.fixed{

    position:absolute;

    left:50px;

    top:100px;

    _left:expression(eval(document.documentElement.scrollLeft+50));

    _top:expression(eval(document.documentElement.scrollTop+100));

}

 

12.不支持min-、max-属性

解决方法：使用css表达式

div{

    /* min-width */

    _width:expression((documentElement.clientWidth < 600) ? "1008px" : "auto" );

    /* max-width */

    _width:expression((documentElement.clientWidth >600) ? "600px" : "auto" );

}