IE8: после z-index

Question

Я видел множество примеров, чтобы исправить безумие z-индекса IE8, но ни один из них, похоже, не помог мне в этом случае.

Я создаю макет «хлебной крошки» на основе UL / LI, где графически каждая хлебная крошка может иметь один из 3-х различных цветов фона, а у каждого - «наклонная торцевая крышка». Вот как это выглядит во всем, кроме IE8:

Наша первоначальная наивная, но работающая реализация добавляет несемантическую разметку между панировочными сухарями с изображениями каждой из возможных пар перекрытия - существует 9 комбинаций, выбранных со сложной серией классов и JS при изменении классов крошки. Тьфу. Я хотел попробовать другое решение, основанное на псевдоэлементах, которые перекрывают крошку вправо, чтобы мы могли отбросить все вещи и логику «делителя».

Мой HTML выглядит так:

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

Я не буду утомлять вас отступами и фоном и тому подобное, достаточно сказать, что каждый из фонов является осколком, который повторяется - по умолчанию (без классов) - серый, положительный - зеленый, отрицательный - красный. Для каждого значения по умолчанию / положительного / отрицательного существует изображение наклона.

Вот немного 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; }

Это дает мне крошки с правильными цветами. Теперь для наклонов:

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

Это прекрасно работает - каждая крошка «выбирает» правильный уклон в зависимости от своего класса. он перекрывает крошку вправо, поэтому мне нужно освободить место для уклона, чтобы «покрыть» его часть:

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

Все это работает удовольствие, кроме IE8:

: после содержимого - за крошкой справа. Я понимаю, что в IE8 есть некоторая странность «сброса z-index», связанная с позиционируемыми элементами, но я ДОЛЖЕН позиционировать li или абсолютное позиционирование: after не сработает. Я также не буду знать, сколько там li, и я не знаю, в каком z-index он будет «жить» на страницах.

Какое волшебное заклинание z-index сделает IE8 счастливым?

Answer 1

Это, вероятно, связано с ошибкой в IE 566462 (исправлено в IE9).

Обычно я обхожу эту ошибку, добавляя пустые элементы SPAN с JS и присоединяя ее в тех же стилях, что иКонтент, сгенерированный CSS (:after в вашем случае):

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

Answer 2

Вот обходной путь, использующий библиотеку 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) });
});