IE8: nach Z-Index

Question

Ich habe Unmengen von Beispielen gesehen, um IE8's Z-Index Wahnsinn zu beheben, aber keine von ihnen scheint mir in diesem Fall zu helfen.

Ich gestalte ein UL/LI-basiertes "Breadcrumb" -Layout, bei dem jeder Breadcrumb grafisch eine von 3 verschiedenen Hintergrundfarben haben kann und jeder eine 'abgeschrägte Endkappe' hat. ' Hier ist, wie es in alles andere als IE8 aussieht:

Unsere anfängliche naiv-but-Arbeits Implementierung fügt nicht-semantisches Markup zwischen Paniermehl mit Bildern von jeder der möglichen Überlappung Paare - es gibt 9 Kombinationen mit einem ausgewählten komplexe Klassen von Klassen und JS, wenn sich die Krümelklassen ändern. Pfui. Ich wollte eine andere Lösung ausprobieren, die auf Pseudo-Elementen basiert, die die Krume nach rechts überlappen, so dass wir alle Teile und Logik der Teilung ablegen können.

Mein HTML sieht wie folgt aus:

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

Ich will Sie nicht langweilen mit der Polsterung und Hintergrund und so, es genügt zu sagen, dass jeder der Hintergründe ein Splitter ist, die wiederholt - Standard (keine Klasse) ist grau, positiv ist grün, negativ ist rot. Für jeden Standard/Positiv/Negativ gibt es ein Bild einer Neigung.

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

Das hat mir meinen Krümel mit den richtigen Farben gibt. Nun zu den Schrägen:

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

Dies funktioniert gut - jeden Krümel ‚nimmt‘ die richtige Neigung auf der Grundlage seiner Klasse. es überlappt die Krümel auf der rechten Seite, damit ich Platz für die Neigung zu ‚Abdeckung‘ ein Teil davon machen müssen:

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

das funktioniert ein All behandeln, mit Ausnahme von IE8:

Der: nach dem Inhalt ist hinter der Krume rechts. Ich verstehe, dass es in IE8 eine 'Zurücksetzende Z-Index'-Seltsamkeit gibt, die mit positionierten Elementen zu tun hat, aber ich MUSS die li's oder die absolute Positionierung von dem positionieren: after's funktioniert nicht. Ich werde auch nicht wissen, wie viele li's es gibt, und ich weiß nicht, welchen Z-Index es auf den Seiten "leben" wird.

Welche magische Z-Index-Beschwörung wird IE8 glücklich machen?

Answer 1

ist hier eine Abhilfe, die jQuery-Bibliothek:

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

Dies ist wahrscheinlich auf IE zusammenhängt bug 566462 (fixieren d in IE9).

ich Umgehung in der Regel diese Fehler durch Hinzufügen von leeren SPAN Elementen mit JS und es mit dem gleichen Stil wie CSS generierte Inhalte (:after in Ihrem Fall) Befestigung:

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 {/* ... */}