IE8 z-index 错误

Question

我试图代表我的一些内容之间的父子关系，看看HERE

在 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

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

这是一个与 PIE 相关的问题。

解决办法是：

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

你在这里 =)

Answer 2

如果问题是 PIE，您可以尝试 jquery 角的边界半径： jquery.corner.js (http://jquery.malsup.com/corner/)

来源：@sudip，Creating rounded corners in IE7 / IE8