IE8 Z 索引，前后伪元素

Question

我正在努力弄清楚这个问题。我有一个article，其中插入了两个元素:before并:after它，这两个元素都绝对位于该文章中。

在除IE8之外的所有浏览器中，z索引堆叠工作正常。它应该按从下到上的顺序排列：

文章内容>淡出图像>图标

我已经尝试了一些不同的东西，其中最新的可以在这里看到：http://jsfiddle.net/LtYMV/2/

我正在尝试的基本内容如下所示：

article {
    // styles
}
article:before {
    // icon background image used on inserted content
}
article:after {
    // background image used on inserted content
}​

我知道这有某种技巧，我似乎无法用 z 索引值的任何组合来弄清楚。感谢帮助！

Answer 1

IE8在伪元素和z索引方面很奇怪。有一个错误使子元素继承（无法覆盖）父元素的 z 索引。您可以在quirksmode上阅读有关IE8和z-index的更多信息。

我稍微改变了你的小提琴，以与你在符合标准的浏览器中的示例相同的方式工作，并且在IE8中工作正常，但在IE：http://jsfiddle.net/LtYMV/8/中没有淡入淡出，尽管文本下方有图标。

我还创建了一个版本，其中它使用另一个元素作为图标（在每个".post"元素之后使用类"icon"）。它仍然没有IE8的淡入淡出，但图标位于文本上方：http://jsfiddle.net/LtYMV/7/，因此与上一个略有改进。

希望这有帮助！