6

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

编辑：关于堆叠顺序的相关堆栈溢出问题

4

3 回答 3

6

这绝对是 IE8 的一个 bug；由于您的:before伪元素已定位，因此它应该创建一个新的堆叠上下文并始终绘制在它的顶部，img 除非您给它一个负数z-index（即使那样，整个元素也应该绘制在它的后面，而不仅仅是它的背景）。

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

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

于 2012-12-14T05:51:15.393 回答
2

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

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

回顾一下：

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

还要记住给两个元素 aposition: relative/absolute以启用堆叠顺序z-index

于 2013-08-25T15:37:25.887 回答
0

IE8 仅<!DOCTYPE>在声明时才支持伪。 来源

    #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;
    }​
于 2012-12-13T19:49:58.000 回答