css - IE9 中的 z-index 分层，例如，检查堆栈上下文(我认为)

Question

我正在从事一个投资组合元素。我在相对定位的 div 中有一个相对定位的图像。使用 z-index 我在上面有一个固定位置的 div，里面有三个 float 的 div，每个 div 都有一个在 css 中指定的游标 url。所有这些都在另一个 div 中。目的是在图像顶部显示上一个、播放和下一个光标，以控制图像的显示。

它在 Safari、Firefox、Chrome 中运行良好。它在 IE(9,8 或 7)中不起作用。光标在图像上时不显示。不知何故，固定位置 div 落在图像后面，即使它的 z-index 说它应该在上面。

我已经阅读了很多这方面的资料。我已经考虑了堆栈上下文，并且我相信它们在我的代码中是可以的。我已经研究过使所有对象都具有相对定位以防万一固定并且相对定位正在创建不同的堆叠上下文。这并没有解决它。我调查了怪癖和标准模式。似乎没有任何效果。

我已经在这里上传了我的问题的剥离示例页面:

http://bigflannel.com/portfolio/ie-test

非常感谢任何帮助。我进行了 8 小时的调试并卡住了。

HTML

<div id ="website">

    <div id="media-panel">
        <img id="image0" class="image" src="http://bigflannel.com/portfolio/admin/albums/album-5/lg/fk01117.jpg">
    </div><!-- #media-panel -->

    <div id="navigation-panel">
        <div id="left-area"></div>
        <div id="play-pause-area"></div>
        <div id="right-area"></div>
    </div><!-- #navigation-panel -->

</div><!-- #website -->

CSS

#website {
    position: relative;
    z-index: 0;
}
#media-panel {
    position: relative;
    height: 600px;
    z-index: 1;
}
.image {
    position: relative;
    max-height: 600px;
    max-width: 600px;
    z-index: 0;
}
#navigation-panel {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 1500px;
    height: 900px;
}
#left-area {
    position: relative;
    float: left;
    cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/prevL.cur), auto;
    width: 500px;
    height: 900px;
}
#play-pause-area {
    position: relative;
    float: left;
    cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/playL.cur), auto;
    width: 500px;
    height: 900px;
}
#right-area {
    position: relative;
    float: left;
    cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/nextL.cur), auto;
    width: 500px;
    height: 900px;
}

Answer 1

不幸的是，当涉及到游标时，IE 有很多问题。这实际上不是 z-index 问题。分层按预期工作。您可以通过在 #navigation-panel 越过图像时在其上放置背景色来对此进行测试。它与 IE 和光标的行为有关。

解决方法:(针对IE9)

/* Background with no opacity */
#navigation-panel {
    background: rgba(0, 0, 0, 0);
}

您可能可以使用过滤器修复早期版本的 IE。