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、ie98都达到了预期的效果(设置z-index的过程当然要顺便设置position这个东西,如果你有先看过网上的文章也会知道。)  

  在首次完成后ie67并不兼容,也就是你现在所看到的demo(你可以放到ie67里看看),经过弹出层被其他a标签遮住了。按照平时的惯例依照直觉z-index:9999;position:relative;zoom:1各种各样的属性都用上了,这个层还是死死的躺在其他a标签下面。  

  没办法,看来乱碰撞不能解决问题,只能用理性去剥开ie6下z-index的沉沦原因。据我所知(不知道什么时候记住的)ie6下的z-index比较是看他们的老大(父级)的比拼,也就是说谁的老大高级(z-index),往往它们也就跟着上位了。  

  按着刚才描述的逻辑去思考这个demo在ie67下的问题,目前所有a标签都是同级(z-index:10;),也就是说所有堂口的老大都是10级的,他们的小弟肯定不会大过他们,这样想来难怪经过弹出层在其他a下面了,鉴于这种情况,我只能把当前a标签的老大li再提高一个级别,使鼠标经过的当前a标签以及弹出层整体提高一个档次,这样就不会给其他a标签遮住了。

  关于ie6/7下的z-index说到底其实就是拼爹,谁的爹大谁就在上面(大部分如此,不排除其他情况)。如果你没有得到答案我会在收到一条评论后公开~最后再补充一句,尼玛的ie6!!

关于ie6/7下的z-index的更多相关文章

  1. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

  2. IE6/IE7下:inline-block解决方案

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  3. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  4. z-index兼容问题:关于ie6/7下的z-index

    z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基 ...

  5. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  6. opacity在IE6~8下无效果,解决的办法

    opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...

  7. ie6,ie7下设置overflow:auto下滚动条不起作用

    今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...

  8. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

  9. IE6条件下的bug与常见的bug及其解决方法

    1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...

随机推荐

  1. 百度推出新技术 MIP,网页加载更快,广告呢?

    我们在2016年年初推出了MIP,帮助移动页面加速(原理).内测数据表明,MIP页面在1s内加载完成.现在已经有十多家网站加入MIP项目,有更多的网站正在加入中.在我们收到的反馈中,大部分都提到了广告 ...

  2. app开发外包注意事项,2017最新资讯

    我们见过很多创业者,栽在这app外包上.很多创业者对于app外包这件事情不是特别重视,以为将事情交给app外包公司就完事了,实际上不是的.无论是从选择app外包公司还是签订合同.售后维护等各方面都有许 ...

  3. Linux碎碎念

    在学习Linux过程中,有许多有用的小技巧.如果放在纸质的笔记本上,平时查阅会相当不方便.现在以一种“碎碎念”的方式,汇集整理在此,目前还不是很多,但随着学习.工作的深入,后续会陆陆续续添加更多的小技 ...

  4. PHP之时间和日期函数

    // 时间日期函数 Time <?php date_default_timezone_set('UTC'); // 获取当前时间的时间戳 $time0 = mktime(); $time1 = ...

  5. 基于DFA敏感词查询的算法简析

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要对敏感词做一个过滤,首先有几个方案可以选择: a.直 ...

  6. MySQL优化聊两句

    原文地址:http://www.cnblogs.com/verrion/p/mysql_optimised.html MySQL优化聊两句 MySQL不多介绍,今天聊两句该如何优化以及从哪些方面入手, ...

  7. python 数据类型 ----字典

    字典由一对key:value 组成的 python中常用且重量级的数据类型 1. key , keys, values 字典由一对key:value 组成的 python中常用且重量级的数据类型 1. ...

  8. 关于SMARTFORMS文本编辑器出错

    最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...

  9. BPM费控管理解决方案分享

    一.方案概述费用是除经营成本外企业的最主要支出,费用管理是财务管理的核心之一,加强企业内控管理如:费用申请.费用报销.费用分摊.费用审批.费用控制和费用支付等,通过科学有效的管理方法规范企业费用管理, ...

  10. ReactiveCocoa代码实践之-UI组件的RAC信号操作

    上一节是自己对网络层的一些重构,本节是自己一些代码小实践做出的一些demo程序,基本涵盖大多数UI控件操作. 一.用UISlider实现调色板 假设我们现在做一个demo,上面有一个View用来展示颜 ...