Question

基本上，我在一个带有2个导航按钮的容器内有一个图像。出于某种原因，IE9中的z-index并不像它应该的那样工作。所有其他浏览器都正确显示。

在IE9中，当我将鼠标悬停在图像上方时，图像位于顶部。它没有想到。导航按钮应位于顶部，以便用户可以单击按钮。

我已经在这里阅读了解决方案，尝试使用z-index，声明所有元素绝对没有成功......

这是一个IE9错误，修复/破解是什么？

修改

我已经添加了一个jsfiddle来解释它。如果将鼠标悬停在图像上，则z-index不起作用，只需将鼠标悬停在图像之外，z-index就可以正常工作。

到目前为止，我已经通过向0不透明度的modal-nav添加背景颜色而作弊。出于某些原因，它适用于IE9。

http://jsfiddle.net/hkw9u7tL/13/（适用于其他浏览器，IE9除外）

HTML：

<div id="modal-overlay"></div>
<div class="modal m-photo"> 
    <div class="modal-close"></div>
    <div class="modal-nav prev"></div>
    <div class="modal-nav next"></div>
    <img src="../gallery/files/7/7/fc53534156328e43.32171077_l.jpg">
</div>

CSS：

#modal-overlay {display: block; position: fixed; z-index: 9; left: 0%; top: 0%; width: 100%; height: 100%; background: rgba(255,255,255, 0.8);}

.modal {display: block; z-index: 99; position: absolute;}

.modal-close {position: absolute; z-index: 9999; right: -15px; top: -13px; width: 30px; height: 30px; background-image: url(../../images/icons2/close.png); cursor: pointer;}

/* modal navigation */
.modal-nav {position: absolute; z-index: 999; width: 35%; height: 100%; cursor: pointer;}
.modal-nav.prev {left: 0;}
.modal-nav.next {right: 0;}

/* MODAL specifics */
.modal.m-photo {width: 850px; height: 650px; background-color: #222;}
.m-photo img {position: absolute; z-index: 99; display: block;}

Answer 1

也许它不是z索引问题......？关闭图标位于视图外部错误... http://jsfiddle.net/hkw9u7tL/

.modal-close {position: absolute; z-index: 9999; right: 15px; top: 15px; width: 30px; height: 30px; background-image: url(../../images/icons2/close.png); background-color: #369; cursor: pointer;}

IE9中的z-index无法正常工作

1 个答案: