IE6/7兼容性问题总结

最新推荐文章于 2021-07-01 21:47:10 发布

Flowering_Vivian

最新推荐文章于 2021-07-01 21:47:10 发布

阅读量224

点赞数

分类专栏：前端项目常见问题总结文章标签： css javascript js

本文链接：https://blog.csdn.net/Flowering_Vivian/article/details/108752960

版权

前端项目常见问题总结专栏收录该内容

16 篇文章 0 订阅

订阅专栏

IE兼容问题

1.JavaScript日期转化为时间戳出现NaN错误

原始字符串 2016-10-11

var date = new Date(“2016-10-11”) 在IE下date是NaN,而其他浏览器正常。

字符串修改成 2016/10/11

var date = new Date(“2016/10/11”) 就正常了

IE6/7兼容性问题

1.z-index兼容性问题

问题描述：假如页面中A和B是兄弟元素，C是A的子元素，D是B的子元素，当我给C和D都设置了绝对定位(position:absolute)，我给C设置了z-index:10; 给D设置了z-index:11; 此时发现在除了IE6、IE7以外的浏览器中正常显示（D元素在C元素的上层，盖住了C元素），但是在IE6和IE7中却没有达到理想状态。

解决办法：给C元素和D元素的父元素，也就是A元素和B元素也设置定位（可以根据实际需求设置相对定位或者绝对定位），并且让A元素的z-index值小于B元素（例如：给A设置z-index:1; 给B设置z-index:2;），此时会发现C元素和D元素的显示效果在IE6和IE7中也达到了理想效果。

小技巧：如果想让一个元素（D）绝对定位置于另一个元素（C）的上层，不光要把D元素的z-index值设置的大于C元素，还要把D元素的父元素的z-index值大于C元素的父元素（注：不一定是父元素，也可以是祖先元素，但要保证两个祖先元素是兄弟元素）。

2.最小高度问题

问题描述：IE6下最小高度为19像素，设置比19像素小，也会自动扩展到19像素。

解决办法：加overflow:hidden或者font-size:0

3.IE6中绝对定位位置错误

问题描述：在ie6中，如果参照物没有触发haslayout ，那么绝对定位的容器的left和bottom就会有问题，在高版本浏览器中，如果定位元素的祖先元素没有设置定位样式，则会相对于body来进行定位。

解决办法：在相对定位的父容器上加入 zoom:1 来触发ie的haslayout即可解决。

小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题。

4.IE6中绝对定位1像素偏差

问题描述：在 IE6 下定位元素的父级宽高都为奇数时，那么在 IE6 下定位元素的 right和bottom都有1像素的偏差。

解决办法：设为偶数

5.IE6浮动元素双边距bug

问题描述：IE6下块元素有浮动和横向margin的时候，横向的margin值被放大成两倍。

解决办法：给浮动元素加 display:inline。

6.IE6/7下li底部间隙的bug

问题描述：在ie67下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。

解决办法：给li设置 float:left或者给li加vertical-align:top。

7.ie6 下父级的overflow:hidden失效

问题描述：ie6 下父级的overflow:hidden;是包不住子级的相对定位的。

解决办法：父级也设为相对定位。

8.在IE6下父级有边框的时候子元素margin值消失

问题描述：在IE6下父级有边框的时候，子元素的margin值消失。

解决办法：触发父级的haslayout(给父级元素加zoom:1)。

9.绝对定位元素消失

问题描述：当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。

解决办法：给定位元素外面包个div。

10.表单控件1px间隙

问题描述：在IE6，7下输入类型的表单控件上下各有1px的间隙。

解决办法：给input加浮动。

11.表单控件加border:none无效

问题描述：在IE6，7下输入类型的表单控件加border:none无效。

解决办法：重置input的背景或者加border:0。

12.ie6不支持png24的图片

解决方案：使用gif代替png24，或者采用以下方法：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>无标题文档</title>  
<style>  
	body { 
		background: #000;
	}  
	.box {
		width: 400px;
		height: 400px;
		background: url(img/png.png);
	}  
</style>  
<!--[if IE 6]>  
<script src="DD_belatedPNG_0.0.8a.js"></script>  
<script>  
	DD_belatedPNG.fix('.box');  
</script>  
<![endif]-->  
</head>  
<body>  
	<div class="box"></div>  
</body>  
</html>

Flowering_Vivian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6/7兼容性问题总结

IE兼容问题1.JavaScript日期转化为时间戳出现NaN错误原始字符串 2016-10-11var date = new Date(“2016-10-11”) 在IE下date是NaN,而其他浏览器正常。字符串修改成 2016/10/11var date = new Date(“2016/10/11”) 就正常了IE6/7兼容性问题1.z-index兼容性问题问题描述：假如页面中A和B是兄弟元素，C是A的子元素，D是B的子元素，当我给C和D都设置了绝对定位(position:absol
复制链接

扫一扫