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]-->