IE8 Z索引错误

Question

我试图代表我的某些内容之间的亲子关系，请看这里

在FF中，黑线（CSS类：“ subLevel” | z-index:-1 |表示关系）在我的方框下（CSS类：“ case” |无z-index，即使设置为“ 1”也不起作用） 。 现在我遇到了IE8的问题，黑线位于一切之上...

我已经看过有关它的一些主题，但是没有找到任何有用的答案。

注意 ：我也使用PIE产生漂亮的圆形边框和一些阴影。 不知道这是否会引起任何问题。

码

HTML

<div id="relatedCases2">
    <div class="legend">
        <div class="legendUnit"><div class="statusIcon s_op"></div> <span>Open</span></div>
        <div class="legendUnit"><div class="statusIcon s_ip"></div> <span>In progress</span></div>
        <div class="legendUnit"><div class="statusIcon s_pe"></div> <span>Pending</span></div>
        <div class="legendUnit"><div class="statusIcon s_cl"></div> <span>Closed</span></div>
        <div class="legendUnit"><div class="statusIcon s_cr"></div> <span>Closed / Unresolved</span></div>
    </div>
    <div class="case">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl1">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl1">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl2">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
    <div class="case lvl1">
        <span class="caseSum">Title</span>
        <span class="caseLabel">No. :</span> <span class="caseField">00000000</span><br />
        <span class="caseLabel">Time :</span> <span class="caseField">15d 12h36m</span><br />
        <span class="caseLabel">Pending :</span> <span class="caseField">5d 7h02m</span><br />
    </div>
</div>

CSS

body {
    height: 1000px;
}

/* legend */
.legend {
    padding: 4px 4px 4px 2px;
    border: 1px dashed black;
    display: inline-block;
}

.legendUnit {
    height: 19px;
    display:inline-block;
    padding: 2px 3px;
    font-weight: bold;
}

.statusIcon {
    width: 1em;
    height: 1em;
    border-radius: 1em;
    behavior: url(/Content/PIE.htc);
    display:inline-block;
    border: 1px solid black;
    box-shadow: #000 0px 0px 2px;
}


#relatedCases2 .legend {
    line-height:1em;
    font-size:1em;
    vertical-align:middle;
}

.legend span {
    position: relative;
    top: -1.5px;
    margin-right:5px;
}

/* status types */

/* open */
.s_op { background: #FFF;}
/* in progress */
.s_ip { background: #FF0;}
/* pending */
.s_pe { background: #ff7500;}
/* closed */
.s_cl { background: #00d800;}
/* closed / unresolved */
.s_cr { background: #c24646;}


.case {
    margin-left: 10px;
    margin-top: 10px;
    padding: 5px;
    background: #90C2E0;
    border-radius:10px;
    width: 50%;
    box-shadow: #000 3px 3px 5px;
    behavior: url(/Content/PIE.htc);
}

.caseSum {
    display: block;
    /* margin */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    /* padding */
    padding: 2px 10px;
    /* color */
    background: #d3d3d3;
    /* font */
    font-weight: bold;
    font-size: 1.6em;
    line-height: 1.6em;
    font-family:Calibri;
    text-shadow:rgba(0,0,0,.01) 0 0 1px;
    -webkit-font-smoothing: antialiased;
    /* shape */
    border: 2px solid black;
    box-shadow: #000 0px 0px 2px;
    border-radius:10px;
    behavior: url(/Content/PIE.htc);
}

.caseLabel {
    color: #333333;
    font-weight: bold;
}


.lvl1 {
    margin-left: 50px;
}
.lvl2 {
    margin-left: 90px;
}

.subLevel {
    position:absolute;
    display:inline-block;
    width:20px;
    z-index:-1;
    left:0;
    top:0;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}

使用Javascript

var count1 = 1;
var count2 = 1;
$(".case").each(function () {
    if ($(this).hasClass("lvl2")) {
        $(this).data("index", count2++);
        count1++;
    } else if ($(this).hasClass("lvl1")) {
        count2 = 1;
        $(this).data("index", count1++);
    } else {
        count1 = 1;
        count2 = 1;
    }
});

$(".lvl1,.lvl2").each(function () {
    var offset = $(this).offset();
    var elHeight = $(this).outerHeight(true);
    var height = elHeight * ($(this).data('index') - 1);
    $(this).append("<div class=\"subLevel\" style=\"" +
        "left:" + (offset.left - 22) + "px;" +
        "top:" + (offset.top - elHeight / 2 - height) + "px;" +
        "height:" + (elHeight + height) + "px\"></div>");
});

Answer 1

感谢给出的评论和链接，我找到了解决方案。 我正在分享它，可以帮助其他人。

这是与PIE相关的问题。

解决方案是：

1. 在具有behavior:url([PIE_path]);元素上将css属性“ position”设置为“ relative”
2. 检查并解决与此更改有关的任何定位麻烦

您在这里=）

Answer 2

如果问题是PIE，则可以尝试使用border-radius的jquery corner：jquery.corner.js（ http://jquery.malsup.com/corner/ ）

消息来源：@sudip， 在IE7 / IE8中创建圆角