4

我正在努力解决这个问题。我有一个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 值的任何组合来解决这个问题。帮助表示赞赏！

4

1 回答 1

4

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

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

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

希望这可以帮助！

于 2012-10-09T16:39:45.987 回答