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

Question

这很令人沮丧....

http://jsfiddle.net/RRnm8/

<div id="target">
    <p>Text to appear in front</p>
</div>

#target {
    position: relative;
    background: red;
    width: 200px;
    height: 200px;
    padding: 45px;
}

#target:before {
    content: "content from before, should be behind #target";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
    z-index: -1;
}

适用于所有浏览器，除了 IE8...

应该是这样显示的：

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

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

请在jsfiddle...上提供一个真实工作示例的答案...

This user 有完全相同的问题。他没有得到答案，但this 显然不起作用，因此我请求在jsfiddle 上提供一个工作示例来演示它

Answer 1

这个问题似乎与 IE 如何处理 z-index 堆栈有关。在 FF 和 Chrome 处理文档范围内的 z-index 元素时，在 IE 中，您可能知道，z-index 首先基于父级的 z-index。

我认为 :before 内容使这个问题复杂化了，尽管它的 z-index 为负，但它是否在父元素中。与其索引进行比较的元素不是父 div，就像在 FF 或 Chrome 中那样，而是 div 内的内容，p 元素。 p 元素不是块，它也共享父 div 的 z-index，所以它不能低于 :before 内容。

解决办法是做一个内部div，或者给p元素相对定位和样式。

见：http://jsfiddle.net/RRnm8/3/