IE 透明 div 中的 z-index 问题
我有一个透明的 div 元素，其 z 索引高于同一页面上的 img 元素。但 Internet Explorer 的行为就好像 img 元素在单击事件时具有更高的 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 元素的单击事件（例如在 Chrome 中工作），但没有任何反应。
有解决办法或解决我的问题吗？
I have a transparent div-element with a higher z-index than an img-element on the same page. But Internet Explorer is acting as if the img-element would have a higher z-value when it comes to click events.
<!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>
When clicking on the image nothing happens altough the click event of the div-element should be fired (works in Chrome for example).
Is there any workaround or fix for my problem?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
事实上，你的div“没有任何背景”，
你需要给它一个不透明度=0.01的彩色背景（例如白色）。
例如：
In fact, your div "Doesn't have any background",
You need to give it a color background (e.g. white) with opacity=0.01.
For example:
对于 IE 来说，使用透明图像似乎是一个合理的解决方法。这里已经回答了这个问题：
IE z-index Problem on element with透明背景
Using a transparent image seems like a reasonable work-around for IE. This was answered already here:
IE z-index trouble on element with transparent background
我已经测试了 Preli
background:white;filter:alpha(opacity=1)给出的建议，效果很好。请参阅 IE 中的演示：http://jsfiddle.net/VMrNF/11/
I have tested the Suggestion given by Preli
background:white;filter:alpha(opacity=1), and it is working fine. See the Demo in IE:http://jsfiddle.net/VMrNF/11/
这在 IE11 中仍然是一个错误，但在 Edge 中不是。下面通过创建一个“看起来”透明但有颜色的背景解决了我的问题。
如果您只希望背景透明，而不希望对象的内容透明，则比上面的过滤器解决方案稍好一些。
This is still a bug in IE11, but not Edge. The following solved my problem by creating a background that "looks" transparent but has a color.
Slightly better that the filter solution above, if you want only the background to be transparent, but not the contents of the object.
div中添加left:0，点击事件
在ie9中测试可用
add left:0 to div, click event available
tested in ie9