IE8: después de z-index

Question

He visto montones de ejemplos para corregir la locura del índice z de IE8, pero ninguno de ellos me parece de ninguna ayuda en este caso.

Estoy diseñando un diseño 'breadcrumb' basado en UL/LI donde gráficamente cada miga de pan puede tener uno de 3 colores de fondo diferentes y cada uno tiene un 'extremo oblicuo inclinado'. Así es como se ve en otra cosa que IE8:

Nuestra aplicación ingenua, pero que trabajan inicial agrega marcado no semántica entre el pan rallado con imágenes de cada uno de los posibles pares de superposición - hay 9 combinaciones seleccionadas con una series complejas de clases y JS cuando las clases de migas cambian. Ugh. Quería apuñalar a otra solución basada en pseudoelementos que se superponen a la migaja hacia la derecha para que podamos deshacernos de todo el "divisor" y la lógica.

Mi HTML se parece a esto:

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

yo no voy a aburrir con el relleno y el fondo y tal, basta con decir que cada uno de los fondos es una astilla que se repite - por defecto (sin clase) es gris, positivo es verde, negativo es rojo. Para cada valor predeterminado/positivo/negativo, hay una imagen de una inclinación.

Aquí hay un poco de 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; } 

Eso me da mis migas con los colores adecuados. Ahora para los sesgos:

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

Esto funciona muy bien - cada miga 'recoge' la inclinación correcta en función de su clase. Se superpone la miga a la derecha de modo que tengo que hacer espacio para la inclinación de la parte 'cobertura' de la misma:

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

Todo esto funciona un tratamiento, excepto para Internet Explorer 8:

El: después del contenido está DETRÁS de la migaja a la derecha. Entiendo que hay cierta rareza de "reinicio de z-index" en IE8 que tiene que ver con elementos posicionados, pero TENGO que posicionar el li o el posicionamiento absoluto de: after no funcionará. Tampoco sabré cuántas li's podría haber, y no sé en qué índice z estará 'vivo' en las páginas.

¿Qué hechizo z-index mágico hará que IE8 sea feliz?

Answer 1

Aquí es una solución usando la biblioteca 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

Esto está probablemente relacionado con Internet Explorer de bug 566462 (arreglar d en IE9).

lo general solucionar este error mediante la adición de elementos vacíos SPAN con JS y lo conecta con los mismos estilos como el contenido generado por CSS-(:after en su 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 {/* ... */}