我正在研究投资组合项目 . 我在一个相对定位的div中有一个相对定位的图像 . 使用z-index我在其上面有一个固定的位置div，其中有三个浮动的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;
}
1 回答
不幸的是，当涉及游标时，IE是非常错误的 . 这实际上不是z索引问题 . 分层按预期工作 . 你可以通过在＃navigation-panel上将背景颜色放在图像上来测试它 . 它与IE和游标的行为有关 .
解决方案:(适用于IE9）
您可以使用过滤器修复早期版本的IE .