IE6、IE7下的z-index问题
有html结构如下：
已经有按照网络上查到的方法，给.pmt-wrap加上了z-index，但是好像不起作用 IE6 IE7 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>
