IE8: po z-index

Question

Widziałem mnóstwo przykładów, aby naprawić szaleństwo IE8 z-index, ale żaden z nich nie wydaje mi się pomóc w tym przypadku.

Stylizuję układ "breadcrumb" oparty na UL/LI, w którym graficznie każdy element menu może mieć jeden z 3 różnych kolorów tła, a każdy z nich ma "ukośne zakończenie". Oto jak to wygląda w czegokolwiek, ale IE8:

Nasza wstępna implementacja naiwny, ale pracujący dodaje non-semantycznych znaczników między panierce z obrazami każdej z możliwych par zakładkowych - istnieje 9 kombinacje wybrane z złożona seria klas i JS, gdy zmieniają się klasy miękiszu. Ugh. Chciałem zaatakować inne rozwiązanie oparte na pseudoelementach, które nakładają się na okruchy po prawej stronie, dzięki czemu możemy pozbyć się wszystkich elementów i logiki "dzielnika".

Moje HTML wygląda następująco:

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

Nie będę Was zanudzać padding i tło i takie, wystarczy powiedzieć, że każda z tych środowisk jest odłamek, który powtarza - domyślna (bez klasy) jest szary, dodatni zielony, ujemny czerwony. Dla każdego domyślnego/pozytywnego/negatywnego istnieje obraz nachylenia.

Oto niektóre 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; } 

To daje mi moje okruchy z odpowiednimi kolorami. Teraz na skosach:

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

Działa to doskonale - każdy okruch „odbierze” prawo skos w oparciu o jego klasie. to zachodzi na okruchy w prawo więc muszę zrobić miejsce na skos na „tytułowej” części go:

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

Wszystko to działa wspaniale, z wyjątkiem IE8:

The: after content jest ZA MUGIEM po prawej stronie. Rozumiem, że w IE8 istnieje pewne "dziwactwo resetowania z-indeksu" związane z pozycjonowanymi elementami, ale MUSZĘ ustawić pozycję li lub absolutne pozycjonowanie: after nie zadziała. Nie będę też wiedział, ile może tam być li, i nie wiem, jaki będzie indeks "z" na stronach.

Co za magiczna inskrypcja z-ind sprawi, że IE8 będzie szczęśliwe?

Answer 1

Tutaj jest rozwiązanie z wykorzystaniem biblioteki 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

Jest to prawdopodobnie związane z IE jest bug 566462 (fixe d w IE9).

zwykle obejść ten problem poprzez dodanie pustych SPAN elementy z JS i dołączenie go z tych samych stylów CSS jak treści generowane (:after w danym przypadku):

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