CSS 选择器之前和之后的 IE8 z-index

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... 该用户也有完全相同的问题。他没有得到任何答案，但这个显然没有得到答案不起作用，因此我请求在 jsfiddle 上演示它的工作示例

Answer 1

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

我认为 :before 内容使这个问题变得复杂，尽管它的 z 索引为负，但它是否在父元素内。与它的索引进行比较的元素不是父 div（如 FF 或 Chrome 中那样），而是 div 内的内容，即 p 元素。 p 元素不是一个块，并且也共享父 div 的 z-index，因此它不能位于 :before 内容下方。

解决方案是制作一个内部 div，或者给予 p 元素相对定位和样式。

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