码迷,mamicode.com
首页 > 其他好文 > 详细

ie7下设置z-index无效如何解决?

时间:2016-12-27 23:09:39      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:技术   z-index   end   this   方法   ddc   images   上下   nbsp   

ie7下z-index无效的问题之前做练习的时候遇到过,百度解决掉之后就丢脑后了。今天项目中又发现这个bug,无奈又去百度,这次还是记下来,节省了百度的时间还能小装一把...

需求是这样的:

 

页面中的两个层默认隐藏,点击这个层的展开图标时要把这个层显示出来,点收起的时候再把这个层隐藏,因为两个层是上下排列,所以点击展开的时候正常的显示应该是这样的,如下(丑)图:

技术分享

 

实现的代码我也贴一部分上来,逻辑就是点哪个层,哪个层的z-index值在原来的基础上加高点

            $isSales.append($(‘<em class="ex-btn ex-hide"></em>‘).on("click",function(){
                zIndex+=2;  //z-index值加2
                if($(this).hasClass("ex-hide")){   //点击展开
                    $(this).removeClass("ex-hide").addClass("ex-show");
                    $(this).parent().parent().addClass("caption2-sales-box2")
                }else{
                    $(this).removeClass("ex-show").addClass("ex-hide");
                    $(this).parent().parent().removeClass("caption2-sales-box2")
                }
                $(this).parent().css("z-index",zIndex); //设置这个层的z-index值
            }))

 

 

图虽然丑了点,但在谷歌火狐等其他浏览器里是正常的,但当我调到ie7的时候,它变成了这样甚至是这样:

技术分享

技术分享

 

这就已经不是丑的问题了,好像在ie7浏览器下z-index根本没有生效,解决方法很多种,不过我目前只会这一种,就是给这个层的父级设置z-index值,代码如下:

      $isSales.append($(‘<em class="ex-btn ex-hide"></em>‘).on("click",function(){
                zIndex+=2;  //z-index值加2
                if($(this).hasClass("ex-hide")){   //点击展开
                    $(this).removeClass("ex-hide").addClass("ex-show");
                    $(this).parent().parent().addClass("caption2-sales-box2")
                }else{
                    $(this).removeClass("ex-show").addClass("ex-hide");
                    $(this).parent().parent().removeClass("caption2-sales-box2")
                }
                $(this).parent().css("z-index",zIndex); //设置这个层的z-index值
                $(this).parent().parent().css("z-index",zIndex); //设置这个层的父级的父级的z-index
            }))

这样就可以解决了

 

ie7下设置z-index无效如何解决?

标签:技术   z-index   end   this   方法   ddc   images   上下   nbsp   

原文地址:http://www.cnblogs.com/xinyueBlog/p/6227575.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!