z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基础展开叙述。这里要讨论的是最近在项目上对z-index在ie6下自己的一个认识,希望能帮助在z-index兼容上遇到问题的同行一个参考。
首先是demo,点击就可以看到相关的demo了,这个demo就是一个分类导航的模块,实现的功能是鼠标经过时当前标签切换背景以及弹出相关层,代码的结构好坏不做进一步探讨。我们继续来看z-index这个东西。
首先我是这样处理,所有a标签z-index都为10,经过弹出层z-index为20,当前a标签z-index为30,这样在chrome、firefox、ie9\8都达到了预期的效果(设置z-index的过程当然要顺便设置position这个东西,如果你有先看过网上的文章也会知道。)
在首次完成后ie6\7并不兼容,也就是你现在所看到的demo(你可以放到ie6\7里看看),经过弹出层被其他a标签遮住了。按照平时的惯例依照直觉z-index:9999;position:relative;zoom:1各种各样的属性都用上了,这个层还是死死的躺在其他a标签下面。
没办法,看来乱碰撞不能解决问题,只能用理性去剥开ie6下z-index的沉沦原因。据我所知(不知道什么时候记住的)ie6下的z-index比较是看他们的老大(父级)的比拼,也就是说谁的老大高级(z-index),往往它们也就跟着上位了。
按着刚才描述的逻辑去思考这个demo在ie6\7下的问题,目前所有a标签都是同级(z-index:10;),也就是说所有堂口的老大都是10级的,他们的小弟肯定不会大过他们,这样想来难怪经过弹出层在其他a下面了,鉴于这种情况,我只能把当前a标签的老大li再提高一个级别,使鼠标经过的当前a标签以及弹出层整体提高一个档次,这样就不会给其他a标签遮住了。
关于ie6/7下的z-index说到底其实就是拼爹,谁的爹大谁就在上面(大部分如此,不排除其他情况)。如果你没有得到答案我会在收到一条评论后公开~最后再补充一句,尼玛的ie6!!
详细解决方案
z-index兼容有关问题:关于ie6/7下的z-index
热度:111 发布时间:2016-04-24 02:46:22.0
相关解决方案
- index.jsp经过模拟action接口 转发 到login.jsp页面后,页面背景无法显示
- Parameter index out of range (五 > number of parameters, which is 4)
- 求高手看一看!index.jsp可以进,在往上点就出现有关问题了
- tomcat启动出现Caused by: java.lang.StringIndexOutOfBoundsException: String index out解决方法
- JSP有关问题 index.jsp使用meta 页面都跳转不过去
- 小白请问: 关于 index.jsp 中 isValid() == false的异常。 就剩20分了.对不住各位了><
- java.lang.StringIndexOutOfBoundsException: String index out of range: 12
- 为什么数组上标(index)只能为int不能为long
- ora-08102:index key not found,obj#57848,file 六, block 6324(2)
- 索引超出范围。必须为非负值并小于集合大小。参数名: index
- menu控件 异常 索引必须位于该列表的界限内。 参数名: index
- Index”并不包孕“productType1”的定义
- 异常:索引超出范围。必须为非负值并小于集合大小。参数名: index
- 目录超出范围。必须为非负值并小于集合大小。参数名: index(三层)
- http://localhost:49538/TPInfoPlat/index.html没法显示网页,去掉数字就可以显示了
- 急纠结z-index
- datagridview,想实现编辑数据的功能 指定的参数已超出有效值的范围。 参数名: index;”解决办法
- jquery index()的有关问题帮小弟我看下这行代码错在哪
- 指定的参数已超出有效值的范围。 参数名: index,该怎么解决
- ASP.net报错提示:指定的参数已超出有效值的范围。参数名: index,添加OnRowDataBound="gvEditMember_RowD这个事件就报错,该如何处理
- <a href='MyPhoto.aspx?DelID=<%# Eval("album_id") %>&index=hddnPageIndex.value' />解决方法
- http://localhost:2263/biaoyuan/(S(vdgswrvs3qwzo1feus4cm355))/Index.aspx解决思路
- <div id="Layer25" style="position: absolute; width: 127px; height: 67px; z-index: 35
- <div id="Layer25" style="position: absolute; width:1000px; height:1000px; z-index: 35; background-color:red,该如何处理
- |M|小弟我也有搞鬼 <div style="position: absolute; width: 1000px; height: 1000px; z-index: 35; background-color:red"
- OnClick=window.open("/index.aspx")出错?解决思路
- 地址栏出现乱码 http://localhost:45019/WEB/(S(jtlpw455vp3udnbiufilzh45))/index.aspx,该如何处理
- 虚拟主机 index.htm解决办法
- http://www.fname.cn/jts/(S(5afv1k55frqf5iqamlygej55))/index.aspx 為什麼地址欄上會多出一些隨機字符呢
- int index = int.Parse(e.CommandArgument.ToString());该怎么处理