logo标签列表

IE中使用透明div时的z-index问题

htmlcssinternet-explorerz-index
21

我有一个透明的 div 元素，它在同一页上比一个 img 元素具有更高的 z-index 值。但是 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 中有效）。

是否有任何解决方法或修复方法可以解决我的问题？

5个回答
22

事实上，你的 div 没有任何背景色。

你需要设置一个带有 opacity=0.01 的颜色背景（例如白色）。

例如：

 background:white; filter:alpha(opacity=1);
2
"background:transparent" 没有效果，但使用带有 alpha 过滤器的颜色确实有效。感谢建议："background:white;filter:alpha(opacity=1);""height=100%" 完美地工作。 - Preli
1
看看这个答案 - 使用rgba设置背景也会使其可点击 - https://dev59.com/tnNA5IYBdhLWcg3wWsiK#6780462 - cowboybebop
@ryan：Internet Explorer 8、7、6等版本不支持rgba，所以这样做行不通。 - Preli
请注意，如果要将此代码仅针对IE 8进行优化，请使用以下hack：background: white\9; filter:alpha(opacity=1)\9; - method
现在已经是2014年底了，标准委员会正在使用完全不同的语法（尚未被IE支持）重新编写过滤器，因此我选择透明图像解决方案，以避免未来的过滤器语法问题。 - Guy Schalnat
4
实际上，这个线程比较旧，所以它还没有被回答 ;) 不过...使用透明图片的技巧确实很棒。 - Preli
1
这仍然是IE11中的一个bug，但不是在Edge中。以下方法通过创建一个“看起来”透明但有颜色的背景来解决了我的问题。
background: rgba(255,255,255,0.0);

略好于上面的过滤解决方案，如果您只想让背景透明，而不是对象内容。
1

我已经测试了Preli提供的建议background:white;filter:alpha(opacity=1)，它运行良好。在IE中查看演示：

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

实际上，这是我给的 ;) - Mo Valipour
没错 - 这个想法来自valipour - 代码是我写的。完美的团队合作；）只可惜需要这样一个（在我看来）丑陋的解决方法才能运行。 - Preli
0
添加left:0到div，点击事件可用
在ie9中测试过
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接