z-index在IE中的中的兼容bug问题
2014-04-01 20:31:34   来源:   评论:0 点击:

今天在写页面的时候发现头部导航栏的下拉菜单,被下面的画中画遮挡住了,然后把导航的下拉菜单样式设置为z-index:999;但是在IE下没起什么作

今天在写页面的时候发现头部导航栏的下拉菜单,被下面的画中画遮挡住了,然后把导航的下拉菜单样式设置为z-index:999;但是在IE下没起什么作用,而在FF下起作用了。然后又把画中画的样式设置为z-index:-99; 在IE下还是没反映。囧。。。

IE下:                                 FF下:

z-index在IE中的中的兼容bug问题    z-index在IE中的中的兼容bug问题

然后在Google里搜索了一下z-index的相关属性,找了半天找到一篇文章。才发现原来又是IE的BUG。解惑: 其实这是 IE 浏览器(windows)的一个 BUG ——在 IE 浏览器中,定位元素会产生一个新的 stacking context,并且从 z-index 的值为 0 开始。

CSS specification 中清楚的规定了除了根元素,只有定位元素的 z-index 被定义一个非 auto 的 z-index 值才能产生新的 stacking context。一般被相对定位的元素并没有定义 z-index,即 z-index 为默认值 auto 。所以按理他不会影响子元素的层叠顺序。而设置了相对定位的 head 产生一个新的 stacking context,所以其被定位的子元素 下拉菜单 以这个新的 stacking context 为参考来决定层叠顺序。

其实IE这个BUG的影响范围很广,只是大家平时不太注意。下面来说明一个最常见的出现情况 z-index 的负值解析,很多朋友因为这个 BUG 的存在甚至武断的认为 IE 支持 z-index 的负值,而FF不支持 z-index 的负值。我们知道:设置了相对位置(position: relative)的元素但没有给出非 auto 的 z-index 就不会产生 stacking context,也就不会影响其子元素的层叠顺序。所以 下拉菜单 的 stacking context 为根元素产生的 root stacking context。“对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下”,按照规则,应该是设定了 z-index 为-99的 画中画 会显示在于未指定 z-index 属性的元素(比如 body)之下。所以在FF下正常。而在IE中设置了相对位置的 head 会拥有 z-index 值0,产生一个新的 stacking context,下拉菜单 在新的 stacking context 内层叠顺序,故在 IE 中会被遮挡住。z-index可以控制div的显示层级,但是FF和IE对z-index的解析机制不一样。

FF中解析z-index,只要设置div的z-index属性就可以控制了。

IE中解析z-index,不仅要设置div的z-index属性,还必须设置div的父div的z-index属性,这样才可以控制。解决办法:在 head 样式中添加z-index:99; 终于在IE下显示为正常了,FF下也正常。其实当时我也不是靠这文章说的方法解决的,只是让我知道了原来这是ie bug。

如果要让test3在test1的上面,那必须这样写

关键z-index要写在父div ,另外,td不能这样写

IE虽然支持,但FF不支持TD这样写的,必须要加个div或者包起来。

责任编辑:eagle

相关热词搜索:z-index

上一篇:div被遮住,如何让div层显示在最外面一层z-index值
下一篇:纯DIV+CSS(无图片)实现圆角