Pseudo-Element auf Eltern versteckt hinter Kind Bild auf IE8

Question

Warum in IE8, ist die Hintergrundfarbe eines Pesudo-Elements hinter Kinder des Elternteils fließt? Der Text fließt vorne, aber die Hintergrundfarbe nicht. Der Z-Index schien keinem zu helfen.

Ich konnte nicht feststellen, ob dies ein Fehler in IE8 ist oder nicht. Es scheint, als wäre dies ein ziemlich gewöhnlicher Anwendungsfall gewesen, aber ich konnte nicht viele Blogposts oder SO-Fragen finden, die damit zusammenhängen.

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

Edit: A related Stack Overflow Question about Stacking Order

Answer 1

Dies ist definitiv ein Fehler in IE8; Da Ihr :before Pseudo-Element positioniert ist, sollte es einen neuen Stapelkontext erstellen und immer über die imgunless you give it a negative z-index gezeichnet werden (selbst dann sollte das gesamte Element dahinter gezeichnet werden, nicht nur der Hintergrund).

Dieses Problem scheint auch spezifisch für das Stapeln zwischen :before und :after Pseudo-Elemente und ersetzte Elemente wie img. Es sieht so aus, als ob IE8 den ersetzten Inhalt in Bezug auf das Stapeln anders behandelt, aber was auch immer es tut, es entspricht definitiv nicht der Spezifikation.

Wie Sie wahrscheinlich wissen, ist dies in IE9 behoben.

Answer 2

IE8 unterstützt nur pseudos wenn <!DOCTYPE> deklariert wird. 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; 
    }​ 

Answer 3

Haben Sie genau das gleiche Problem, das einzige, was Sie tun können, ist die Stapelreihenfolge über CSS und z-index erzwingen. Der einzige Haken ist, dass z-index auf das untergeordnete Element ab dem übergeordneten Element gesetzt wird, so dass Sie keine korrekte logische Reihenfolge wie #parent-element {z-index: 2} und #child-element {z-index: 1} finden können. Die z-index für #child-element wird einfach auf Ebene 1 als separate Stapelreihenfolge gesetzt innerhalb der #parent-element.

können Sie einstellen, nach wie vor z-index für die #child-element mit einem Wert von -1, wird es bekommt nur die ganzen #parent-element Stapelreihenfolge zurück.

So zu rekapitulieren:

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

Denken Sie auch daran, beide Elemente zu geben, ein position: relative/absolute die Stapelreihenfolge fo z-index