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

Question

为什么在 IE8 中，伪元素的背景颜色会流到父元素的子元素后面？文本在前面流动，但背景颜色没有。 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;
    }

编辑:A related Stack Overflow Question about Stacking Order

Answer 1

这绝对是IE8的一个bug；由于您的 :before 伪元素已定位，它应该创建一个新的堆叠上下文并始终绘制在 img unless you give it a negative z-index 之上(即便如此，整个元素都应该绘制在它后面，而不仅仅是它的背景)。

这个问题似乎也特定于 :before 和 :after 伪元素之间的堆叠以及 img 等替换元素。看起来 IE8 在堆叠方面以不同方式处理替换内容，但无论它做什么，它绝对不符合规范。

您可能已经知道，这已在 IE9 中修复。