IE8 z-index在css选择器之前和之后

时间:2011-04-04 14:46:03

标签: html css internet-explorer-8 z-index

这非常令人沮丧....

http://jsfiddle.net/RRnm8/

适用于所有浏览器,IE8除外......

它应该显示如下:

correct version http://f.cl.ly/items/4410273m1G1m1O2U0K0a/Screen%20shot%202011-04-04%20at%2016.40.54.png

但是在IE8中你得到了这个:'(

wrong version http://f.cl.ly/items/2e351L0G3y2H1O1g1a1L/Screen%20shot%202011-04-04%20at%2016.41.41.png

所以问题是如何让它在IE8中正常工作?

请在jsfiddle ...

上提供答案作为一个真实的工作示例

This buddy有完全相同的问题。他得不到答案,但this显然不起作用,因此我要求在jsfiddle

上展示它的工作实例

提前致谢:)

1 个答案:

答案 0 :(得分:17)

此问题似乎与IE处理z-index堆栈的方式有关。 FF和Chrome在文档范围内使用z-index处理元素,在IE中,您可能知道,z-index首先基于父级的z-index。

我认为:在内容复杂化这个问题之前,尽管它有一个负的z-index,它是否在父元素中。与其进行比较的元素不是父div,而是在FF或Chrome中,而是div中的内容p元素。 p元素不是块并且也共享父div的z-index,因此它不能低于:before content。

解决方案是制作内部div,或者为p元素提供相对定位和样式。

请参阅:http://jsfiddle.net/RRnm8/3/