IE8 :z-index 之后

Question

我已经看过很多修复 IE8 的 z-index 问题的示例，但在这种情况下似乎没有一个对我有帮助。

我正在设计一个基于 UL/LI 的“面包屑”布局，其中每个面包屑可以具有 3 种不同背景颜色中的一种，并且每个都有一个“倾斜的端盖”。以下是它在除 IE8 之外的任何应用中的外观：

我们最初的朴素但有效的实现在面包屑之间添加了非语义标记，其中包含每个可能的重叠对的图像 - 当面包屑类发生变化时，会使用一系列复杂的类和 JS 选择 9 种组合。啊。我想尝试另一种基于与右侧面包屑重叠的伪元素的解决方案，这样我们就可以抛弃所有“分隔符”的东西和逻辑。

我的 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-index 中。

什么神奇的 z-index 咒语会让 IE8 开心？

Answer 1

这是使用 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

这可能与IE的bug 566462（IE9修复）有关。

我通常通过在 JS 中添加空的 SPAN 元素并使用与 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 {/* ... */}