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的更多相关文章

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

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

  2. IE6/IE7下:inline-block不兼容的问题

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

  3. 关于ie6/7下的z-index

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Android 图片开发内幕系列第一篇

    前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...

  2. Warning: session_start() [function.session-start]: Cannot send session cookie解决办法

    在很多时间使用了session就会出来如下提示了, Warning: session_start() [function.session-start]: Cannot send session coo ...

  3. c# js调用AjaxPro方法出错解析

    公司的项目的框架中有一部分用到了AjaxPro这个方法,看到这个方法的我一脸懵逼,老老实实去百度了一下. AjaxPro是.NET平台下的一个回调式AJAX框架,使用简单,功能强大.顾名思义ajax, ...

  4. ZigBee安全相关

    ZigBee安全由AES加密算法和CCM操作方式作为安全方案,广泛使用在ZigBee联盟的通信协议中.ZDO层负责安全策略和安全配置的管理. Technorati 标签: ZigBee 安全 2. 配 ...

  5. JavaScript 中undefined,null,NaN的区别

    1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型.var a1;var a2 = true;va ...

  6. jquery 从页面获取li数组,删除不在数组中的key

    应用场景: 获取页面 li 下面 key的值,添加到 arr数组 删除车型不在arr 数组中的value值. 示例代码: var getSaleModels = function(brand_id){ ...

  7. ASP.NET MVC局部验证及相关问题

    在上一篇“asp.net mvc常用的数据注解和验证以及entity framework数据映射”话题中,有的博友提到 ‘“同一个实体在3-4个地方会发生修改,每个修改需要验证的方式都不一样,后端就不 ...

  8. 【转】IL编织 借助PostSharp程序集实现AOP

    ref:   C# AOP实现方法拦截器 在写程序的时候,很多方法都加了.日志信息.比如打印方法开始,方法结束,错误信息,等等. 由于辅助性功能的代码几乎是完全相同的,这样就会令同样的代码在各个函数中 ...

  9. Hadoop介绍及最新稳定版Hadoop 2.4.1下载地址及单节点安装

     Hadoop介绍 Hadoop是一个能对大量数据进行分布式处理的软件框架.其基本的组成包括hdfs分布式文件系统和可以运行在hdfs文件系统上的MapReduce编程模型,以及基于hdfs和MapR ...

  10. SQLite清空表并将自增列归零[转]

    SQL标准中有 WHERE name = 'TableName'; 也可以直接把该记录删掉: 1 DELETE FROM sqlite_sequence WHERE name = 'TableName ...