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

【问题标题】：Pseudo element on parent hidden behind child image on IE8IE8上隐藏在子图像后面的父元素伪元素
【发布时间】：2012-12-13 19:44:22
【问题描述】：

为什么在 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;
    }

【问题讨论】：

嗨罗伯特，你有没有找到解决这个问题的方法？
我真的不记得了——但我想我不记得了

标签： css internet-explorer-8 pseudo-element

【解决方案1】：

这绝对是 IE8 的 bug；由于您的 :before 伪元素已定位，它应该创建一个新的堆叠上下文并始终绘制在 img unless you give it a negative z-index 的顶部（即使这样，整个元素也应该绘制在它后面，而不仅仅是它的背景） .

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

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

【讨论】：

文本会呈现在前面，而只有背景呈现在后面，这似乎很奇怪。
@Robert：我认为 IE 将图像视为后代内联框的背景，将绝对定位的伪元素视为同一堆叠上下文中的内联元素，使其服从@987654322 @... 除了它完全错误地应用了这些规则。
如果我理解该链接，并且 IE8 正在将图像绘制为背景层，那么使用 :after 应该在图像前面绘制背景，但唉，它仍然在后面。
Bummer - 这个答案解释了问题的根源，所以我将接受它作为答案，但我希望在某个地方有一种解决方法也可以解决问题。希望！

【解决方案2】：

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

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

回顾一下：

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

还记得给两个元素一个position: relative/absolute 以启用z-index 的堆叠顺序

【讨论】：

【解决方案3】：

IE8 仅在声明 <!DOCTYPE> 时才支持伪。 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;
    }

【讨论】：

虽然正确，但这不是这里描述的问题，Doctype是在jsFiddle中声明的（以及在我正在处理的站点中），并且伪元素呈现，但是伪元素的背景在儿童图像后面流动。
将position: absolute 更改为position: relative 似乎已修复它。
与位置：相对；它呈现前面的元素，但它仍然是布局流程的一部分。
z-index 与 doctype 有什么关系？