首页 新闻 搜索 专区 学院

ie6下z-index问题

0
悬赏园豆:20 [已解决问题] 解决于 2014-12-06 11:59
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>无标题文档</title>
  6 <style>
  7 * {margin:0;padding:0}
  8 #box {width:360px;border:1px solid #F00;zoom:1;margin:100px auto }
  9 #box:after { content:'';display:block;clear:both}
 10 #box ul {width:350px;}
 11 #box li {width:75px;height:180px;float:left;border:1px solid  #666;margin:20px 0 20px 10px;text-align:center;list-style:none;position:relative;display:inline;}
 12 #box li .text {background:#F00;width:200px;height:130px;position:absolute;top:-20px;left:10px;display:none}
 13 </style>
 14 <script>
 15 window.onload=function (){
 16     var aUl=document.getElementById('box');
 17     var aLi=aUl.getElementsByTagName('li');
 18     var text=getClassName(aUl,'text')
 19     
 20     
 21     for(var i=0;i<aLi.length;i++){
 22         aLi[i].index=i;
 23         aLi[i].onmouseover=function (){
 24             for(var i=0;i<aLi.length;i++){
 25             aLi[i].zIndex=1;        
 26             }
 27             this.zIndex=6;
 28             text[this.index].parentNode.style.background='red';
 29             text[this.index].style.display='block';    
 30             //alert(this.zIndex);
 31             
 32         }
 33         aLi[i].onmouseout=function (){
 34             
 35             this.style.background='#fff'
 36             text[this.index].style.display='none';    
 37         }
 38     }
 39     function getClassName(oParent,sClass){
 40         var aEle=oParent.getElementsByTagName('*');
 41         var result=[];
 42         for(var i=0;i<aEle.length;i++){
 43             if(aEle[i].className==sClass){
 44                 result.push(aEle[i])    
 45             }    
 46         }    
 47         return result
 48     }
 49 }
 50 </script>
 51 </head>
 52 
 53 <body>
 54 <div id="box">
 55     <ul>
 56         <li style="z-index:5">
 57             <img src="webqq/1.png" width="75" height="150"/>
 58             <p class="des">woshihi</p>
 59             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 60         </li>
 61         <li>
 62             <img src="webqq/2.png" />
 63             <p>她shihi</p>
 64             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 65         </li>
 66         <li>
 67             <img src="webqq/3.png" />
 68             <p>wossjd</p>
 69             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 70         </li>
 71         <li>
 72             <img src="webqq/4.png" />
 73             <p>kajd</p>
 74             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 75         </li>
 76          <li>
 77             <img src="webqq/1.png" width="75" height="150"/>
 78             <p>woshihi</p>
 79             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 80             
 81         </li>
 82         <li>
 83             <img src="webqq/2.png" />
 84             <p>她shihi</p>
 85             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 86         </li>
 87         <li>
 88             <img src="webqq/3.png" />
 89             <p>wsjd</p>
 90             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 91         </li>
 92         <li>
 93             <img src="webqq/4.png" />
 94             <p>ksjd</p>
 95             <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div>
 96         </li>
 97     </ul>
 98 </div>
 99 </body>
100 </html>

我想实现的效果就是,当鼠标移入LI时,红色块儿出来,移除消失,但是在ie6下,红色块儿被遮住了,其余浏览器都是好的,,

我看了一些z-index在ie6下失效的原因,然后来看我的demo,估计是div的父级层级不够,因为所有的li都是同一个层级,当我在行内给一个li添加层级时,<li style='z-index:4'></li>,这时这个红块儿显示正常,我就在js中试着给当前移入的这个li提高层级,其余的减少层级,但是失败了,求大神帮忙指点一下

wstpa的主页 wstpa | 初学一级 | 园豆:151
提问于:2014-11-19 13:05
< >
分享
最佳答案
0

我以前是想提高当前li的z-index;用this.zIndex;但是没用(我也不知道为啥),,我换了一种思路,因为我加在行间还是有用,,因此换做给当前li添加className,将z-index属性一边设置,,这样就OK了

wstpa | 初学一级 |园豆:151 | 2014-11-20 18:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册