首页 > 代码库 > IE6常见兼容性问题

IE6常见兼容性问题

2024-11-13 16:10:02   202人阅读

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常见兼容性问题


联系
我们