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

最新推荐文章于 2021-05-30 22:35:25 发布

小昭

最新推荐文章于 2021-05-30 22:35:25 发布

阅读量4.3k

点赞数

分类专栏：前端开发点滴文章标签： ie class list function menu table

本文链接：https://blog.csdn.net/yueshangchuanqi/article/details/7263548

版权

前端开发点滴专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天上班收到群里一个人通过临时会话发过来的.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>
    <!--<ul>
    <li><div class="box"  style="z-index:11"><img src="btn.gif" width="109" height="30px;"/><div id="list" class="hidden" at="menu" style="z-index:15"><a href="">我的生词本1</a></div></div></li>
    <li><div class="box"  style="z-index:10"><img src="btn.gif" width="109" height="30px;"/><div id="list" class="hidden" at="menu" style="z-index:14"><a href="">我的生词本2</a></div></div></li>
    <li><div class="box"  style="z-index:9"><img src="btn.gif" width="109" height="30px;"/><div id="list" class="hidden" at="menu" style="z-index:13"><a href="">我的生词本2</a></div></div></li>
    </ul>-->
    <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。