IE8:z-index之后

Question

我已经看到了大量的例子来修复IE8的z-index疯狂,但在这种情况下它们似乎都没有帮助我.

我正在设计基于UL/LI的"面包屑"布局,图形上每个面包屑可以具有3种不同背景颜色中的一种,每种颜色都有一个"倾斜的端盖".除了IE8之外,它的外观如何:

我们最初的天真但工作的实现在面包屑之间添加了非语义标记和每个可能的重叠对的图像 - 当crumb-classes改变时,有一组复杂的类和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:

:内容是在右边的面包屑之后.我知道IE8中有一些'重置z-index'怪异与定位元素有关,但我必须定位li或者绝对定位:after后无效.我也不知道有多少李,我不知道它会在页面上"生活"什么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 演示

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