Question

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

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

    <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中的一个错误;由于您的:before伪元素已定位，因此应创建新的堆叠上下文并始终在img unless you give it a negative z-index之上绘制（即使这样，整个元素也应该在其后面绘制），而不仅仅是它的背景。）

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

您可能已经注意到，这在IE9中已得到修复。

Answer 2

有完全相同的问题，您唯一能做的就是通过CSS和z-index强制执行堆叠顺序。唯一的问题是z-index从父元素开始放在子元素上，因此您无法像#parent-element {z-index: 2}和#child-element {z-index: 1}那样执行正确的逻辑顺序，z-index对于#child-element，只需将其设置为级别1作为单独的堆栈顺序 in #parent-element。

您仍然可以为z-index设置#child-element，其值为-1，它只会返回整个#parent-element堆叠顺序。

所以回顾一下：

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

另请注意，为这两个元素添加position: relative/absolute以启用堆叠顺序z-index

Answer 3

如果声明<!DOCTYPE>，IE8仅支持伪。 Source

    #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;
    }

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

3 个答案: