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

为什么在IE8中，父元素子元素后面流动的pesudo元素的背景颜色？文本在前面流动，但背景颜色没有。 Z指数似乎没有任何帮助。隐藏在IE8上的子图像后面的父元素上的伪元素

我一直无法确定这是否是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; 
    }

来源

2012-12-13 Robert

罗伯特嗨，你有没有找到一个变通这个问题？ –

我真的不记得 - 但我不认为我做了 – Robert

这绝对是IE8中的一个bug;因为你的伪元素被定位，所以它应该创建一个新的堆叠上下文，并且总是绘制在imgunless you give it a negative z-index之上（即使这样，整个元素应该绘制在它后面，而不仅仅是它的背景）。

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

正如你可能知道，这是固定在IE9。

来源

2012-12-14 05:51:15 BoltClock

看起来很奇怪，文字会在前面呈现，只有背景背后。 – Robert

@Robert：我认为IE将图像视为后代内联框的背景，将绝对定位的伪元素作为同一个堆叠上下文中的内联元素，并将它们置于[一些非常不直观的堆栈规则中只有在仔细检查之后才开始有意义]（http://stackoverflow.com/questions/11088176/before-pseudo-element-stacking-order-issue/11088328#11088328）......除非它完全错误地应用这些规则。 – BoltClock

如果我理解这个链接，并且IE8将图像作为背景层进行绘制，那么使用：after应该在图像前面绘制背景，但是很遗憾，它仍然落后。 – Robert

如果<!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; 
    }

来源

2012-12-13 19:49:58 bobthyasian

虽然正确，但这不是这里描述的问题，Doctype是在jsFiddle（以及我正在处理的网站）中声明的，而伪类型元素呈现，但伪元素的背景在儿童图像后面流动。 – Robert

将'position：absolute'改为'position：relative'似乎已经修复了它。 – bobthyasian

与位置：相对;它呈现在前面的元素，但它仍然是布局流程的一部分。 – Robert

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

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

因此，要回顾：

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

还记得给这两个元素position: relative/absolute使堆叠顺序FO z-index

来源

2013-08-25 15:37:25 Gruber

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

回答

相关问题