gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:29:44 25 4
gpt4 key购买 nike

基本上,我在带有 2 个导航按钮的容器中有一个图像。出于某种原因,IE9 中的 z-index 无法正常工作。所有其他浏览器都正确显示。

在 IE9 中,当我将鼠标悬停在图像上时,图像在顶部。这不是应该的。导航按钮应位于顶部,以便用户可以单击按钮。

我在这里阅读了有关解决方案的信息,尝试使用 z-index,声明所有元素都是绝对的,但没有成功...

这是 IE9 的错误吗?修复/修改是什么?

编辑:

我添加了一个 jsfiddle 来解释它。如果将鼠标悬停在图像上,z-index 不起作用,只要将鼠标悬停在图像外,z-index 就会起作用。

到目前为止,我已经通过向不透明度为 0 的模态导航添加背景色来作弊。由于某些原因在 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;}

最佳答案

也许这不是 z 索引问题...?关闭图标在 View 外的位置错误... 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;}

关于css - IE9 中的 z-index 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28331334/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com