2012-12-13 53 views
6

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

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

+0

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

+0

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

回答

6

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

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

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

+0

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

+0

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

+0

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

0

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

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

+1

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

+0

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

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设置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