Question

我正在努力想出这个问题。我有一个article，其中插入了两个元素:before和:after，它们都被绝对定位在该文章中。

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

文章内容＆gt;淡出图像＆gt;图标

我已经尝试了一些不同的东西，最新的东西可以在这里看到：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-index值的任意组合来解决这个问题。帮助赞赏！

Answer 1

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

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

我还创建了一个版本，它使用另一个图标元素（带有“icon”类，就在每个“.post”元素之后）。它仍然没有得到IE8的淡出，但图标 over 文本：http://jsfiddle.net/LtYMV/7/，所以它比前一个略有改进。

希望这有帮助！

IE8 Z-Index与伪元素之前和之后

1 个答案: