我已经看到了一些例子来解决IE8的Z索引精神错乱，但他们都没有在这种情况下帮助我。IE8：Z指数后

我正在设计一个基于UL/LI的“面包屑”布局，其中每个面包屑可以具有3种不同背景颜色之一，每种颜色都有一个“倾斜的端盖”。这是它看起来什么，但IE8：

enter image description here

我们最初的幼稚，但是工作的实现增加了面包屑之间的非语义标记与每个可能的重叠对的图像 - 有一个选定的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：

enter image description here

：内容是在面包屑后面向右。我知道在IE8中有一些'重置z-index'怪异与定位元素有关，但我必须定位li或绝对定位：after之后将不起作用。我也不知道有多少可能存在，我不知道z-index会在页面上“生存”。

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

来源

2012-03-23 n8wrl

后：和之前：

我通常加入空SPAN元素与JS，并（在你的情况:after）相同的样式，CSS生成的内容，将其附着解决此错误的元素是不是真的部分布局，所以我并不感到惊讶，他们在IE8中使用z-index行为不当。 – 2012-03-23 20:41:13

作为一个实验，我试着向右移动，并且确实使它们看起来是正确的，因为'后面的'元素覆盖'早期的'元素，但是我们必须向后列出我们的面包屑！不完全'语义':) – n8wrl 2012-03-23 20:46:04

hehehe！ Geez，什么是变通办法。去搞清楚。 – 2012-03-23 20:48:28

下面是一个使用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) }); 
});

来源

2012-03-23 21:16:26

要使用IE8进行测试，请先下载示例。（ - > SAVE - > DOWNLOAD） – 2012-03-23 21:22:06

这可能与IE的bug 566462（定势d在IE9中）。

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

来源

2012-03-23 22:06:24

如果你这样做，你可以删除'：before'和'：after'样式，只需放入没有javascript的跨度来减少开销。 – Kokos 2012-10-30 10:04:10

@Kokos：对于所有浏览器而言，由于IE8的市场份额很小（根据StatCounter的数据，约13％），所以浏览器的HTML代码没有太多意义。 – 2012-10-30 16:36:33

IE8：Z指数后

回答

jsBin demo

相关问题