码迷,mamicode.com
首页 > 其他好文 > 详细

z-index属性在IE7和IE6的兼容问题

时间:2016-01-03 11:05:45      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

z-index属性在IE7和IE6的兼容问题:
采用定位的元素有可能就会用到z-index属性,不过具有一定的浏览器兼容问题,不用问基本属于IE低版本浏览器的问题,因为它的前科实在太多了,虽然现在用低版本浏览器的用户越来越少,相信不出几年就会消失,但是毕竟现在还是存在的,下面就介绍一下如何解决z-index属性在IE7和IE6浏览器的兼容问题。
代码实例如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#a{position:relative;}
#a-1
{
  position:absolute;
  z-index:100;
  width:100px;
  height:100px;
  background:red;
}
#b{position:relative;}
#b-1
{
  position:absolute;
  z-index:10;
  width:40px;
  height:40px;
  background:black;
}
</style>
</head>
<body>
<div id="a">
  <div id="a-1"></div>
</div>
 
<div id="b">
  <div id="b-1"></div>
</div>
</body>
</html>

 

特别说明:以上代码最好复制黏贴到本地进行测试,否则可能无法正确显示效果。
代码在标准浏览器或者IE8和IE8以上浏览器运行的时候,红色的能够覆盖黑色的,但是在IE7和IE7以下浏览器中则不能,下面介绍一下如何解决此问题,a和b元素都添加z-index属性即可实现正确显示效果,这是因为在标准浏览器或者IE8和IE8以上浏览器中,如果定位元素没有设置z-index属性值,那么此值默认为auto,而在IE7和IE6中,此值为0,根据相关z-index层级树等相关原则就会导致此现象,具体可以参阅CSS的z-index属性用法详解z-index在IE6和IE7的兼容性问题一章节。  

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11598

更多内容可以参阅:http://www.softwhy.com/divcss/

 

z-index属性在IE7和IE6的兼容问题

标签:

原文地址:http://www.cnblogs.com/nulifendou/p/5095862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!