带有前后伪元素的 IE8 Z-Index答案

【问题标题】：IE8 Z-Index with Before and After Pseudo Elements带有前后伪元素的 IE8 Z-Index
【发布时间】：2012-09-24 22:55:20
【问题描述】：

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

在除 IE8 之外的所有浏览器中，z-index 堆叠都运行良好。它应该按照从下到上的顺序：

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

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

【问题讨论】：

标签： css internet-explorer-8 z-index pseudo-element

【解决方案1】：

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

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

我还创建了一个版本，它使用另一个元素作为图标（使用类“icon”，就在每个“.post”元素之后）。 IE8 还没有褪色，但是图标在文字上方：http://jsfiddle.net/LtYMV/7/，所以它比上一个略有改进。

希望这会有所帮助！

【讨论】：

感谢您的帮助。最后，我正在寻找使 IE8 看起来像 Chrome 一样只是的东西。不幸的是，我不得不切换到 JS 来插入 <span> 元素来代替 IE8 的前后伪元素。