z-index IE8 bug sui contenuti generati con: dopo

Question

Si tratta di un errore noto in IE8, guarda l'ultimo bug qui:
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

Ora, giocando un po 'con un semplice esempio ho trovato questo (test utilizzando IE8):
http://jsfiddle.net/AjCPM/

<div id="target"> 
    <div>div</div> 
</div> 


#target { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    z-index: 1; 
} 
#target>div{ 
    background: red; width: 200px; height: 200px; 
    position: relative; 
    z-index: 0; 
} 
#target:before { 
    top: 0; left: 10%; width: 100%; height: 100%; background: cyan; 
    content: "after"; 
    position: absolute; 
    z-index: 10; 
} 

IE8 rende il rettangolo cyan (la: dopo) sotto il rettangolo rosso, anche quando ha una minore z-index.
E ora la parte difficile:
cambia l'indice z per #target> div da 0 a -1 e voilá! è risolto!

Quindi ho risolto il problema ora utilizzando un sacco di z-index: -1;
Ma non mi sento al sicuro con questo.

Conosci una soluzione migliore?

Sto usando: dopo pseudoelemento perché ho un elenco di prodotti e voglio aggiungere un'immagine all'elemento quando ha la classe "venduta" per esempio.
Posso creare nel server o con JS un nuovo elemento html, ma penso di usare: after è la soluzione semantica corretta.
Il problema è che sono un po 'paranoico riguardo al: dopo pseudoelemento, ora, , pensi che sia meglio evitarlo?

Answer 1

Io uso un metodo diverso per risolvere questo problema:

Il codice HTML per ogni prodotto contiene un banner "tutto esaurito" che può essere posizionato sopra l'immagine principale. Di default il CSS nasconde questo elemento. Se il DIV di "prodotto" di avvolgimento contiene una classe di "soldOut", il CSS sostituirà la dichiarazione predefinita e visualizzerà il banner.

<div class="product soldOut">         
    ... product html ... 
    <div class="soldOutBanner"></div>  
</div> 

CSS:

.soldOutBanner { 
    display:none 
} 

.soldOut .soldOutBanner { 
    display:block; 
    width:133px; 
    height:130px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    z-index:10; 
    background-image:url(../SoldOut.png); 
} 

Answer 2

Per rispondere alla tua ultima domanda prima, fino a quando non è necessario per supportare qualsiasi browser che mancano completamente il supporto per contenuti generati (http://caniuse.com/#feat=css-gencontent) allora non si dovrebbe bisogno di evitarlo. Tuttavia, dal momento che si nota che si tratta di un bug noto, si dovrebbe essere attenti su di esso.

In questo specifico esempio, posso pensare a tre diversi modi per aggirare il bug. Se questi ti sono utili dipende dal tuo caso d'uso reale.

1. Uso :after invece di :before e rimuovere il posizionamento dal bambino div: http://jsfiddle.net/AjCPM/24/

   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #target>div{ 
       background: red; 
       width: 200px; 
       height: 200px; 
   } 
   
   #target:after { 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

2. Aggiungi il dopo al bambino div al posto del genitore: http://jsfiddle.net/AjCPM/26/

   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #target>div{ 
       position: relative; 
       background: red; 
       width: 200px; 
       height: 200px; 
       z-index: 0; 
   } 
   
   #target>div:before{ 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

3. Usa un elemento di avvolgimento (di solito perché avete già uno) per applicare lo stile di base per: http://jsfiddle.net/AjCPM/29/

   <div id="target"> 
       <div id="wrap"> 
        <div>div</div> 
       </div> 
   </div> 
   
   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #wrap>div{ 
       position: relative; 
       background: red; 
       width: 200px; 
       height: 200px; 
       z-index: 0; 
   } 
   
   #wrap>div:before{ 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

In sostanza, di fronte a una differenza di interpretazione tra i browser come questo, la cosa migliore è cercare di riorganizzare il vostro approccio alla trova qualcosa che funzioni cross-browser.

Answer 3

Una breve nota sul: prima e: dopo i selettori in IE8: per farli funzionare è necessario dichiarare un DOCTYPE. Vedi this W3Schools page. Suppongo che tu abbia già fatto questo.

Vedere la risposta to this question se non l'hai già (penso che tu probabilmente abbia).

Fondamentalmente, la linea di fondo è che si tratta di un bug. La soluzione per l'utilizzo di un z-index di -1 non è ideale, ma in questo caso NON ci sarà alcun problema per il bug. Non penso che usare uno z-index di -1 sia qualcosa di cui preoccuparsi eccessivamente, a meno che non causi problemi nel layout. Se sei molto preoccupato, allora perché non ti rivolgi SOLTANTO a IE8 con la correzione. Ad esempio, è possibile utilizzare un commento condizionale in questo modo:

<!--[if IE 8]> 
<style> 
#target>div{ 
    z-index:-1; 
} 
</style> 
<![endif]--> 

Comportamenti come quello che stiamo vivendo è uno dei motivi per molti sviluppatori disprezzano IE. In molti casi, incluso questo, non esiste una soluzione perfetta. Si potrebbe:

1. fermata utilizzando i :before e :after selettori & regolare il codice HTML/CSS a qualcosa che è IE8-friendly.
2. utilizzare i commenti condizionali o JavaScript per emettere una correzione che si rivolge specificamente IE8
3. Tenere hacking e cercare di trovare un altro combo HTML/CSS che funziona - ma è probabile che non sarà più ideale che la soluzione negativa z-index .

Sfortunatamente, in molti casi non esiste un sito web cross-browser "semanticamente corretto".

I miei due centesimi servono per creare un foglio di stile IE8 e utilizzare il commento condizionale che ho visualizzato sopra per caricare il foglio di stile. All'interno del foglio di stile, utilizzare la soluzione z-index: -1 che si è venuta a creare. Molti siti Web utilizzano fogli di stile con targeting IE.

Answer 4

Non c'è bisogno di impostare z-index es, basta assicurarsi di utilizzare :after invece di :before (demo):

#target { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 
#target>div{ 
    background: red; 
    width: 200px; 
    height: 200px; 
} 
#target:after { 
    content: "after"; 
    position: absolute; 
    top: 0; 
    left: 10%; 
    width: 100%; 
    height: 100%; 
    background: cyan; 
}​ 

Dal momento che il contenuto generato viene dopo #target, sarà naturalmente essere impilata sopra.

BTW Se un prodotto è "venduto" o meno è un'informazione semantica, e quindi la soluzione semantica corretta sarebbe quella di includerla nell'HTML, piuttosto che aggiungere l'immagine tramite CSS.