Home > Article > Web Front-end > z-index属性在IE7和IE6的兼容问题_html/css_WEB-ITnose
z-index属性在IE7和IE6的兼容问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:541150browse
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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS如何设置连接<a>的样式_html/css_WEB-ITnoseNext article：旋转文字的CSS代码_html/css_WEB-ITnose