Pseudo élément sur le parent caché derrière l'image de l'enfant sur IE8

Question

Pourquoi, dans IE8, la couleur d'arrière-plan d'un élément pesudo s'écoule-t-elle derrière les enfants du parent ? Le texte passe devant, mais pas la couleur d'arrière-plan. Le Z-index ne semble pas aider.

Je n'ai pas été en mesure de déterminer s'il s'agit d'un bogue dans IE8 ou non. Il semble qu'il s'agisse d'un cas d'utilisation assez courant, mais je n'ai pas trouvé beaucoup d'articles de blog ou de questions de l'OS à ce sujet.

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 : Une question connexe de Stack Overflow sur l'ordre d'empilage

Answer 1

Il s'agit certainement d'un bogue dans IE8 ; puisque votre :before est positionné, il doit créer un nouveau contexte d'empilement et être toujours dessiné au-dessus du pseudo-élément img à moins que vous ne lui donniez un avis négatif z-index (même dans ce cas, l'élément entier doit être dessiné derrière lui, et pas seulement son arrière-plan).

Ce problème semble également spécifique à l'empilement entre :before y :after et remplacé des éléments comme img . Il semble qu'IE8 traite le contenu remplacé différemment en termes d'empilement, mais quoi qu'il fasse, il n'est certainement pas conforme à la spécification.

Comme vous le savez probablement, ce problème est corrigé dans IE9.

Answer 2

J'ai exactement le même problème, la seule chose que vous pouvez faire est de forcer l'ordre d'empilement via CSS et z-index . Le seul problème est que z-index est placé sur l'élément enfant à partir de l'élément parent, donc vous ne pourrez pas faire un ordre logique correct comme #parent-element {z-index: 2} y #child-element {z-index: 1} le z-index pour le #child-element sera simplement placé au niveau 1 en tant que commande de pile séparée. à l'intérieur de le site #parent-element .

Vous pouvez toujours définir z-index pour le #child-element avec une valeur de -1, il récupérera simplement l'ensemble de la #parent-element l'ordre d'empilage.

Donc, pour récapituler :

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

N'oubliez pas non plus de donner aux deux éléments un position: relative/absolute pour activer l'ordre d'empilage pour z-index

Answer 3

IE8 ne prend en charge les pseudos que si <!DOCTYPE> est déclaré. 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;
    }