IE8中before和after CSS选择器的z-index问题

Question

IE8中before和after CSS选择器的z-index问题

13

这太令人沮丧了....

<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上演示它的可行示例。

- zanona

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- smdrager · Accepted Answer

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

我认为:before内容使这个问题更加复杂，并且尽管它有一个负的z-index，但它位于父元素内。与在FF或Chrome中将其与父div进行比较不同，其索引正在与

内部的内容

元素进行比较。p元素不是块级元素，并且共享父级div的z-index，因此无法在:before内容下方。

解决方法是创建一个内部的div，或者给p元素设置相对定位和样式。

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