您的位置：首页 > 其它

IE6、IE7兼容问题汇总（持续更新）

2017-05-12 15:55 417 查看

1、IE6、IE7 overflow失效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow失效</title>
<meta name="description" content=''>
<meta name="keywords" content=''>
<style type="text/css">
.d{ overflow: hidden; margin: 100px; width: 100px; height: 100px; border: 1px solid #f00;}
.dd{ position: relative; width:50px; height: 50px; background: #ff7300;}
.dd span{position: absolute; left: -30px; top: -30px; width: 50px; height: 50px; background: #08d;}
</style>
</head>
<body>
<div class="d">
<div class="dd">
<span></span>
</div>
</div>
</body>
</html>

其他浏览器

ie7、ie6

解决办法：

在父级元素，也加上position: relative;

.d{position: relative; overflow: hidden; margin: 100px; width: 100px; height: 100px; border: 1px solid #f00;}

2、IE6、IE7 inline-block

（1）、inline元素的display属性设置为inline-block时，所有的浏览器都支持；

（2）、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；

解决办法：

div { display:inline-block; _zoom:1;_display:inline;} /*推荐：ie6*/
div { display:inline-block; *zoom:1;*display:inline;} /*推荐：ie6、7*/

3、IE6、IE7中position:relative/absolute z-index失效

当我们使用css做一个浮动层的时候通常会用到如下带：

.xxx{ postion:absolute; z-index:12;}

这样做class=”xxx”的元素就会位于普通层的上方，这样在大多数浏览器中都是没有问题的，但是在IE6或者IE7这种怪咖中就有可能不起作用了，原因就在于需要将容器的父辈容器也设置z-index属性，在IE6/7中需要对比两个不同级别的元素的z-index要逐级的向父元素查找，如果父元素没有可比性，那么后面的元素会无视前面的元素的z-index强行覆盖。

附：

IE中的注释条件

<!--[if IE 5]>
仅IE5.5可见
<![endif]-->

<!--[if gt IE 5.5]>
仅IE 5.5以上可见
<![endif]-->

<!--[if lt IE 5.5]>
仅IE 5.5以下可见
<![endif]-->

<!--[if gte IE 5.5]>
IE 5.5及以上可见
<![endif]-->

<!--[if lte IE 5.5]>
IE 5.5及以下可见
<![endif]-->

<!--[if !IE 5.5]>
非IE 5.5的IE可见
<![endif]-->

<!--[if !IE]><!-->
您使用不是 Internet Explorer
<!--<![endif]-->

<!--[if IE 6]><!-->
您正在使用Internet Explorer version 6或者 一个非IE 浏览器
<!--<![endif]-->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ie 6 ie 7 兼容 overflow z-index

相关文章推荐

新的分享

章节导航