Question

我有一个透明的div元素，z-index比同一页面上的img-element更高。但是，当涉及到点击事件时，Internet Explorer的行为就好像img-element会有更高的z值。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body style="margin:0;padding:0;">
    <img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
    <div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>

当点击图像时，没有任何事情发生，而应该触发div元素的click事件（例如在Chrome中工作）。

是否有解决方法或解决我的问题？

Answer 1

事实上，你的div“没有任何背景”，

你需要给它一个不透明度= 0.01的彩色背景（例如白色）。

例如：

 background:white; filter:alpha(opacity=1);

Answer 2

对于IE来说，使用透明图像似乎是一种合理的解决方法。这已在这里得到解答：

IE z-index trouble on element with transparent background

Answer 3

我已经测试了Preli background:white;filter:alpha(opacity=1)给出的建议，它运行正常。参见IE中的演示：

http://jsfiddle.net/VMrNF/11/

Answer 4

这仍然是IE11中的一个错误，但不是Edge。以下通过创建“看起来”透明但有颜色的背景解决了我的问题。

background: rgba(255,255,255,0.0);

上面的过滤器解决方案稍微好一点，如果你只想要背景是透明的，而不是对象的内容。

Answer 5

添加左：0到div，点击可用的事件

在ie9

中测试

IE透明div中的z-index问题

5 个答案: