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

Question

为什么在IE8中,是在父母的孩子身后流动的pesudo元素的背景颜色？文本在前面流动,但背景颜色不在前面.Z-index似乎没有任何帮助.

我无法确定这是否是IE8中的错误.这似乎是一个非常常见的用例,但我找不到很多博客文章或与之相关的SO问题.

http://jsfiddle.net/VAg2E/

    <div id="parent">
       <img src="http://placehold.it/200x200">
    </div>


    #parent{ padding: 20px; }
    #parent:before{
       content: 'Behind the image';
       position: absolute;
       top: 0;
       left: 0;   
       width: 100px;
       height: 100px;
       background-color: red;
    }

编辑:有关堆叠顺序的相关堆栈溢出问题

Answer 1

这绝对是IE8中的一个错误; 因为你的:before伪元素是定位的,它应该创建一个新的堆叠上下文并且总是在它上面绘制,img 除非你给它一个负数z-index(即使这样,整个元素应该在它后面绘制,而不仅仅是它的背景).

这个问题似乎也特定于堆叠:before和:after伪元素和替换元素之类的img.看起来IE8在堆叠方面对待替换内容的方式不同,但无论它做什么,它都绝对不符合规范.

您可能已经知道,这在IE9中已得到修复.