IE6常见兼容性问题

时间：2015-01-22 21:28:32 阅读：147 评论：0 收藏：0 [点我收藏+]

标签：

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" );
}

IE6常见兼容性问题

标签：

原文地址：http://www.cnblogs.com/happyfreelife/p/4242547.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行