ie z-index bug

在IE6与7上最经常遇到的就是z-index无效。

imageimage

一般来讲,ie对父级的要求比较高,如果父级有position属性,但是没有给z-index属性,那默认都是0,所以不论子集里面有多高的z-index属性,都是没用的。

所以一般情况下,需要给包含z-index属性的父级一个z-index:1的属性,这样可以解决很多莫名其妙的问题。

这样虽然简单的层级问题可以解决,但是如上图,同级之间的层级问题又出现,相同层级的同辈元素z-index属性下面的比上面的高。

这种问题一般都出现在制作下拉菜单时比较常见。

解决方法与上面一样,需要给当前较高的z-index属性。

imageimage

题外话:这种下拉菜单虽然比较好用,但是兼容性其实比较差,而且嵌套的层次比较多。

对于复杂的DOM模型在不同的浏览器下差异还是挺大的。所以尽量简化用新的结构可能更适合。

此条目发表在 css, 实验室 分类目录,贴了 , , 标签。将固定链接加入收藏夹。