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/
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
942
收藏
