IE8: dopo z-index

Question

Ho visto un gran numero di esempi per correggere la follia z-index di IE8, ma nessuno di loro sembra aiutarmi in questo caso.

Sto disegnando un layout "breadcrumb" basato su UL/LI, dove graficamente ogni breadcrumb può avere uno dei 3 diversi colori di sfondo e ognuno ha un "capolino inclinato". Ecco come appare in tutto tranne che IE8:

La nostra implementazione ingenuo, ma la lavorazione iniziale aggiunge markup non semantica tra il pangrattato con le immagini di ciascuna delle possibili coppie di sovrapposizione - ci sono 9 combinazioni selezionate con un serie complesse di classi e JS quando cambiano le classi di briciole. Ugh. Volevo prendere una pugnalata a un'altra soluzione basata su pseudo-elementi che si sovrappongono alla briciola a destra in modo da poter abbandonare tutta la roba e la logica del "divisore".

mio HTML assomiglia a questo:

<ul class="breadcrumbs"> 
    <li class="positive">positive</li> 
    <li>default</li> 
    <li class="positive">positive</li> 
    <li class="negative">negative</li> 
    <li>default</li> 
</ul> 

io non voglio annoiarvi con l'imbottitura e lo sfondo e tale, basti dire che ognuno dei sfondi è una scheggia che si ripete - di default (nessuna classe) è grigio, positivo è verde, negativo è rosso. Per ogni valore predefinito/positivo/negativo c'è un'immagine di un'inclinazione.

Ecco alcuni CSS:

ul.breadcrumbs 
    { 
     display: block; 
     clear: both; 
     position: relative; 
     z-index: 10; 
    } 
    ul.breadcrumbs li 
    { 
     display: block; 
     float: left; 
     position: relative; 
     ...height,width,padding,etc.etc... 
     background: url(sprite-x.png) repeat-x 0 -216px; 
    } 
    ul.breadcrumbs li.negative { background-position: 0 -243px; } 
    ul.breadcrumbs li.positive { background-position: 0 -323px; } 

che mi dà le mie briciole con i colori giusti. Ora per le inclinazioni:

ul.breadcrumbs li:after 
    { 
     content: ""; 
     display: block; 
     position: absolute; 
     top: 0; left: 100%; 
     width: 24px; 
     height: 100%; 
     z-index: 1; 
     background: url(sprite.png) no-repeat 0 -783px; 
    } 
    ul.breadcrumbs li.negative:after { background-position: 0 -864px; } 
    ul.breadcrumbs li.positive:after { background-position: -25px -864px; } 

Questa grande opera - ogni briciola 'raccoglie' l'inclinazione a destra secondo la classe. si sovrappone la mollica verso destra quindi devo fare spazio per l'inclinazione a parte 'copertura' di esso:

ul.breadcrumbs li+li:before 
    { 
     content: ""; 
     display: block; 
     float: left; 
     width: 22px; 
     height: 100%; 
    } 

Tutto questo funziona a meraviglia, tranne che per IE8:

Il: dopo il contenuto è DIETRO la briciola a destra. Capisco che ci sia un po 'di stranezza di azzeramento di z-index in IE8 che ha a che fare con elementi posizionati, ma DEVO posizionare il li o il posizionamento assoluto di: after non funzionerà. Inoltre, non saprò quanti potrebbero esserci, e non so in che modo z-index "vivrà" sulle pagine.

Quale magico incantesimo z-index renderà IE8 felice?

Answer 1

Ecco una soluzione che utilizza la libreria jQuery:

jsBin demo

CSS:

ul li{ 
    position:relative; 
    float:left; 
    display:inline; 
    font-family:Verdana, Helvetica, sans-serif; 
    height:18px; 
    padding:0px 34px 0 38px; 
    margin-left:-33px; 
    font-size:12px; 
    background:url(http://i42.tinypic.com/zya52u.png) right top; 
    color:#fff; 
    } 
    .positive{ 
    background-position:right -18px; 
    } 
    .negative{ 
    background-position:right -36px; 
    } 

jQuery:

var liLen = $('.breadcrumbs li').length; 
$('.breadcrumbs li').each(function(i,e){ 
    $(this).css({'z-index' : '-'+(liLen+i) }); 
}); 

Answer 2

Questo è probabilmente legato a IE di bug 566462 (fixe d in IE9).

Io di solito risolvere questo bug con l'aggiunta di vuoti SPAN elementi con JS e legandolo con gli stessi stili come contenuti CSS generati (:after nel tuo caso):

ul.breadcrumbs > li:after, 
ul.breadcrumbs > li > SPAN {/* ... */} 

ul.breadcrumbs > li.negative:after, 
ul.breadcrumbs > li.negative > SPAN {/* ... */} 

ul.breadcrumbs > li.positive:after, 
ul.breadcrumbs > li.positive > SPAN {/* ... */}