IE6、IE7下的z-index问题_html/css_WEB-ITnose
- WBOY原创
- 2016-06-21 09:43:55987浏览
IE6 IE7 z-index 浏览器兼容
有html结构如下：<div class="wrap"> <div class="fl-wrap"> left </div> <div class="fr-wrap"> <ul> <li> <div class="fl"> <div class="pmt-wrap"> <a class="pmt"> 鼠标经过时，显示div </a> <div class="pmt-detail"> ... </div> </div> </div> <div class="fr"> right </div> <div class="clear"></div> </li> <li> <div class="fl"> <div class="pmt-wrap"> <a class="pmt"> 鼠标经过时，显示div </a> <div class="pmt-detail hidden"> ... </div> </div> </div> <div class="fr"> right </div> <div class="clear"></div> </li> </ul> </div> <div class="clear"></div> </div>
相关的css:
.wrap{ border:1px solid red; height:300px; padding:10px; width:500px; } .fl-wrap{ border:1px solid green; float:left; height:100px; width:50px; } .fr-wrap{ border:1px dashed blue; float:right; height:300px; width:440px; } ul{ margin:0; padding:0; } .fr-wrap li{ border:1px solid #000; height:100px; list-style-type:none; margin:5px; padding:5px; } .clear{ clear:both; height:0; overflow:hidden; } .fr-wrap .fl{ border:1px dashed red; float:left; height:100%; width:140px; } .fr-wrap .fr{ border:1px dashed blue; float:right; height:100%; width:260px; } .fl .pmt-wrap{ position:relative; *z-index:2; } .fl .pmt{ cursor:pointer; font-size:12px; margin:5px; padding:0; position:relative; z-index:1; } .fl .pmt-detail{ background-color:#fff; border:1px solid #ccc; height:200px; left:5px; position:absolute; top:16px; width:100px; z-index:3; } .hidden{ display:none; } 火狐下的效果：（也是希望得到的效果）
IE6、IE7下的效果：
已经有按照网络上查到的方法，给.pmt-wrap加上了z-index，但是好像不起作用
回复讨论(解决方案)
<!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>上传图片</title><style type="text/css"> .wrap{ border:1px solid red; height:300px; padding:10px; width:500px; } .fl-wrap{ border:1px solid green; float:left; height:100px; width:50px; } .fr-wrap{ border:1px dashed blue; float:right; height:300px; width:440px; } ul{ margin:0; padding:0; } .fr-wrap li{ border:1px solid #000; height:100px; list-style-type:none; margin:5px; padding:5px; } .clear{ clear:both; height:0; overflow:hidden; } .fr-wrap .fl{ border:1px dashed red; float:left; height:100%; width:140px; } .fr-wrap .fr{ border:1px dashed blue; float:right; height:100%; width:260px; } .fl .pmt-wrap{ position:relative; } .fl .pmt{ cursor:pointer; font-size:12px; margin:5px; padding:0; } .fl .pmt-detail{ background-color:#fff; border:1px solid #ccc; height:200px; left:5px; position:absolute; top:16px; width:100px; z-index:3; display:none; } .hidden{ display:none; }</style><script type="text/javascript">//原生JS写法，，代码比较多，，如果引用JQ库，那就简单多了window.onload=function(){ var oParent = document.getElementById('frWrap'); var oPmt = getByClassName(oParent,'pmt'); //alert(oPmt.length); var pmtDetail = getByClassName(oParent,'pmt-detail'); for(var i= 0; i<oPmt.length; i++){ oPmt[i].index = i; oPmt[i].onmouseover=function(){ //alert(0); //alert(this.index); pmtDetail[this.index].style.display='block'; this.parentNode.style.zIndex='1'; //关键。。给当前父层添加 z-index } oPmt[i].onmouseout=function(){ this.parentNode.style.zIndex=''; pmtDetail[this.index].style.display='none'; } } }// 通过class获取元素function getByClassName(oParent,sClass){ var arrReslut = []; var oEle = oParent.getElementsByTagName('*'); for(var i = 0; i<oEle.length; i++){ if(oEle[i].className==sClass){ arrReslut.push(oEle[i]); } } return arrReslut;}</script></head><body><h2>IE6下，需要给父层添加z-index才行，但如果在css加，因为是class，所以后面的也一起添加了。因此需要用JS动态添加到当前的父级，反正你也要实现显示隐藏效果，刚好可以这样实现</h2><div class="wrap"> <div class="fl-wrap"> left </div> <div class="fr-wrap" id="frWrap"> <ul> <li> <div class="fl"> <div class="pmt-wrap"> <a class="pmt"> 鼠标经过时，显示div </a> <div class="pmt-detail"> ... </div> </div> </div> <div class="fr"> right </div> <div class="clear"></div> </li> <li> <div class="fl"> <div class="pmt-wrap"> <a class="pmt"> 鼠标经过时，显示div </a> <div class="pmt-detail"> ... </div> </div> </div> <div class="fr"> right </div> <div class="clear"></div> </li> </ul> </div> <div class="clear"></div> </div></body></html> 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn