IE8 :after z-index

Я видел множество примеров исправления безумного 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:

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

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