html - 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 提供作为真实工作示例的答案...

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 元素不是 block ，它也共享父 div 的 z-index，因此它不能低于 :before 内容。

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

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