ie6 ie7 绝对定位相对定位层被遮住

最新推荐文章于 2024-10-07 09:24:46 发布

weixin_34413802

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Silvia/archive/2011/12/29/2306399.html

版权

今天上班收到群里一个人通过临时会话发过来的.rar文件，打开一看，是一个菜单效果

在IE6和IE7下就被遮住在FF和IE8下效果如下图

代码如下

<! DOCTYPE HTML >
< html lang ="en-US" >
< head >
     < meta charset ="UTF-8" >
     < title ></ title >
     < style type ="text/css" >
        * { margin : 0 ; padding : 0 }
        ul,table { margin : 0 auto }
        ul { width : 200px ; }
        ul li { list-style : none ; height : 40px ; }
        .box { position : relative ; top : 0 ; left : 0 ; z-index : 9 }
        .box img { cursor : pointer ; display : block ; }

        #list { background : #eeeeee ; border : solid 1px #d7d7d7 ; text-align : center ; padding : 5px 0 ; font-size : 12px ; position : absolute ; width : 109px ; top : 30px ; z-index : 9999 ; zoom : 1 ; left : 0 ; overflow : hidden ; }
        #list a { text-decoration : none ; }
        .hidden { display : none ; }
     </ style >
     < script type ="text/javascript" src ="jquery.js" ></ script >
     < script type ="text/javascript" >
         // console.log($('#aaa'));
     </ script >
</ head >
< body >
     < table style ="200px;" >
         < tr >
             < td style ="height:40px;" >< div class ="box" style ="z-index:10" >< img src ="btn.gif" width ="109" height ="30px;" />< div id ="list" class ="hidden" at ="menu" >< a href ="" >我的生词本1 </ a ></ div ></ div ></ td >
         </ tr >
         < tr >
             < td style ="height:40px;" >< div class ="box" style ="z-index:9" >< img src ="btn.gif" width ="109" height ="30px;" />< div id ="list" class ="hidden" at ="menu" >< a href ="" >我的生词本2 </ a ></ div ></ div ></ td >
         </ tr >
         < tr >
             < td style ="height:40px;" >< div class ="box" style ="z-index:8" >< img src ="btn.gif" width ="109" height ="30px;" />< div id ="list" class ="hidden" at ="menu" >< a href ="" >我的生词本2 </ a ></ div ></ div ></ td >
         </ tr >
     </ table >
     
     < div id ="aaa" ></ div >
     < script type ="text/javascript" >
        $( function (){
           ( function (){
                 var list = $( ' #list ' ),target = $( ' .box ' );
                target.toggle( function (){
                    $( this ).children( ' #list ' ).removeClass( ' hidden ' );
                }, function (){
                    $( this ).children( ' #list ' ).addClass( ' hidden ' );
                });
           }())
        });
         // console.log($('#aaa'))
     </ script >
</ body >
</ html >

ul+li部分以及这部分中的style都是后来加上的，开始我尝试给box这个div加递减的z-index，可是测试的时候不知道是没刷新到还是咋回事，没出效果。

我以前写过类似的效果，所以我就用ul+li这种经常写的格式写了一套，测试了一下，在IE6\7\8和FF下都没问题。于是就把这个改好的文件又打包发给那位X童鞋，X童鞋发了个截图说他一定要用table的，所以我继续尝试。过了一小会儿，X童鞋自己就把问题解决了，就是截图中的。给每一个相对定位的父元素，加递减的z-index。