Internet Explorer Z 索引

Question

我为此编写了一个小 JavaScript：http://www.tx-customers.com/ep-immobilien/?page_id=183。

现在在 Internet Explorer 中，我遇到了图层问题，因此悬停功能无法正常工作。与特定图像相关的图像顶部有列表项，更改要查看的图像的类别。这可行，但如果您单击一个图像或滑块激活（3 秒后），则 li-items 位于显示的图像后面。它适用于 FF、Opera、Safari 和 Chrome。 我已经搜索了 z-index 解决方法尝试设置位置和 z-index，但它没有任何改变。

HTML 结构是：

<div id="team">
    <div class="images">
        <img id="1-team-member-picture" class="team-member" src="img-src" rel="185">
        <li class="splitter" rel="1"></li>
        <img id="2-team-member-picture" class="team-member" src="img-src" rel="185">
        <li class="splitter" rel="2"></li>
        <div id="results">
            <p class="res"></p>
        </div>
        <p class="clear"></p>
    </div>
</div>

CSS 代码：

#team .images {
    float: left;
    background: url(images/gesamt_962px.png) no-repeat;
    position: relative;
    height: 382px;
    width: 769px;
    z-index: 5;
    padding-left: 64px;
}

#team .images img {
    height: 382px;
    position: relative;
    z-index: 4;
}

#team .images .team-member {
    position: absolute;
    display: none;
    left: 32px;
}

#team .images .current, #team .images .clicked {
    display: inline;
}

#team .images li {
    width: 30px;
    height: 382px;
    float: left;
    position: relative;
    z-index: 20;
    list-style-type: none;
}

IE 的 CSS 代码（试一试）：

#mainwrap {
    font: 14px/20px Times New Roman, Times, sans-serif;
}

#team {
    width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

#team .images {
    margin: 0 auto;
    background: url(images/gesamt_962px.png) no-repeat;
    position: relative;
    height: 382px;
    width: 769px;
    padding-left: 64px;
    z-index: 10;
}

#team .images .team-member {
    position: absolute;
    display: none;
    left: 32px;
    z-index: 0 !important;
}

#team .images .current, #team .images .clicked {
    position: absolue;
    display: inline;
    z-index: 0 !important;
}

#team .images li {
    width: 30px;
    height: 382px;
    float: left;
    list-style-type: none;
    position: relative;
    z-index: 1 !important;
}

这是脚本： http://www.tx-customers.com/ep-immobilien/wp-content/themes/epi/js/teamSlider.js

这是我第一次尝试 JS，所以请不要因为一些愚蠢的编码而责怪我！ :P

JS 中使用 Hover 的部分。

jQuery($splitter).mouseover( function () {
    if(!$clicked) stopAnimate();
    slideRemoveClass("current");
    $('#' + $(this).attr('rel') + '-team-member-picture').addClass("current");
});

jQuery($splitter).mouseleave( function () {
    if(!$clicked) animate();
    slideRemoveClass("current");
    $('#' + $(this).attr('rel') + '-team-member-picture').removeClass("current");
});

function animate() {
    clearTimeout(interval);
    interval = setTimeout( slide, $delay );
}

function stopAnimate() {
    clearTimeout(interval);
}

Answer 1

Z-Indexing 很奇怪，因为在 IE 中没有更合适的词。

长话短说，要在 IE 中正确使用 z-indexing，涉及的每个元素（从父级到子级）都必须有一个 z-index（有时一直回到正文）。

这里的这个问题很好地回答了这个问题： IE7 Z-Index Layering Issues