ie7下设置z-index无效如何解决?
2024-08-30 21:10:11
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
}))
这样就可以解决了
最新文章
- Eclipse集成Tomcat:6个常见的”how to”问题
- PHP防SQL注入不要再用addslashes和mysql_real_escape_string
- PHP 后台定时循环刷新某个页面 屏蔽apache意外停止
- 《理解 ES6》阅读整理:函数(Functions)(一)Default Parameter Values
- 十、EnterpriseFrameWork框架的分层架构及意义(控制器、业务对象、实体、Dao之间关系)
- SPOJ 3643 /BNUOJ 21860 Traffic Network
- keepalive support-----Programming applications
- SA密钥长度、明文长度和密文长度
- 【LeetCode练习题】Longest Valid Parentheses
- Python之可变类型与不可变类型
- 移动端H5地图矢量SHP网格切分打包方案
- WIP 投料报 Invalid Serial Number
- 高性能缓存系统Memcached在ASP.NET MVC中应用
- Go语言基础之包
- JS与CSS阻止元素被选中及清除选中的方法总结
- Linux系统平均负载3个数字的含义
- 使用quicklz缩小程序体积
- 使用 Composer 查看 FastAdmin 项目 组件的版本
- vmware 完全关闭时间同步
- Linux服务器快速安装可视化桌面且可以远程RDP远程连接