Css IE8上隐藏在子映像后面的父映像上的伪元素

为什么在IE8中，pesudo元素的背景色在父元素的子元素后面流动？文本在前面流动，但背景色不流动。Z指数似乎没有任何帮助

我还不能确定这是否是IE8中的一个bug。这似乎是一个非常常见的用例，但我找不到很多博客帖子或与之相关的问题

#父项{padding:20px；}
#家长：以前{
内容:"影像背后";；
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
背景色：红色；
}

---

编辑：

如果声明了

，IE8仅支持伪

---

这绝对是IE8中的一个bug；由于您的

：在定位
伪元素之前，它应该创建一个新的堆叠上下文，并始终绘制在
img
的顶部（即使如此，整个元素也应该绘制在它的后面，而不仅仅是它的背景）

这个问题似乎也特别针对
:before
和
:after
伪元素和替换元素（如
img
）之间的堆叠。看起来IE8在堆叠方面对替换内容的处理有所不同，但不管它在做什么，它肯定不符合规范

正如您可能知道的，这在IE9中是固定的。
如果您有完全相同的问题，您唯一能做的就是通过CSS和
z-index
强制堆叠顺序。唯一的问题是
z-index
被放置在从父元素开始的子元素上，因此您无法按照
#父元素{z-index:2}
和
#子元素{z-index:1}
的逻辑顺序进行操作，
#子元素
的
z索引
将作为
#父元素
内的一个单独堆栈顺序设置为级别1

您仍然可以使用-1值为
#子元素设置
z-index
，它将返回整个
#父元素的堆叠顺序

因此，总结一下：

#parent-element { z-index: 99;} /* or any arbitrary number fitting */
#child-element {z-index: -1;}

还记得给这两个元素一个
位置：相对/绝对
来启用z-index的堆叠顺序
虽然正确，但这不是这里描述的问题，Doctype在JSFIDLE中声明（在我正在处理的站点中），伪元素呈现，但是伪元素的背景在子图像后面流动。将
位置：绝对
更改为
位置：相对
似乎已将其固定；它将元素呈现在前面，但它仍然是布局流程的一部分。
z-index
与doctype有什么关系？文本呈现在前面，而只呈现在后面，这似乎很奇怪。@Robert:我认为IE将图像视为子代内联框的背景，并且绝对定位的伪元素作为同一堆栈上下文中的内联元素，使它们服从。。。除非它完全错误地应用了这些规则。如果我理解了这个链接，IE8将图像绘制为背景层，那么使用：after应该在图像前面绘制背景，但遗憾的是，它仍然在后面。Bummer-这个答案解释了问题的根源，所以我将接受它作为答案，但我希望在某个地方也能找到解决问题的方法。有希望地！嗨，罗伯特，你找到解决这个问题的方法了吗？我真的不记得了，但我想我没有找到
    #parent { padding: 20px; z-index: 2; }
    #parent:before {
       content: 'Behind the image';
       position: absolute;
       top: 0;
       left: 0;   
       width: 100px;
       height: 100px;
       background-color: red;
       z-index: -1;
    }​

#parent-element { z-index: 99;} /* or any arbitrary number fitting */
#child-element {z-index: -1;}