jsBin demo 的

Question

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

我正在设计一个基于UL / LI的面包屑＆＃39;在图形上，每个面包屑可以具有3种不同背景颜色中的一种，每种颜色都有一个倾斜的端盖。＆＃39;除了IE8之外，它的外观如何：

enter image description here

我们最初的天真但工作的实现在面包屑之间添加了非语义标记和每个可能的重叠对的图像 - 当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; }

这很有效 - 每个面包屑都会选择＆＃39;基于等级的右倾。它将碎屑重叠在右边，所以我必须为斜面腾出空间来覆盖＆＃39;部分内容：

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

所有这些都是一种享受，除了IE8：

enter image description here

：内容背后是面包屑。我知道有一些＆＃39;重置z-index＆＃39; IE8中的古怪与定位元素有关，但是我必须定位这个或者以后的绝对定位：以后的工作。我也不知道可能有多少人，而且我不知道它会是什么样的z-index＆＃39;生活＆＃39;在页面上。

什么神奇的z-index咒语会让IE8满意？

Answer 1

这可能与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 {/* ... */}

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

IE8：z-index之后

2 个答案:

jsBin demo 的