IE11下zindex为负，事件无法穿透

最新推荐文章于 2025-11-03 10:53:54 发布

原创最新推荐文章于 2025-11-03 10:53:54 发布 · 794 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE11 #z-index #负值 #事件 #穿透

IE 专栏收录该内容

2 篇文章

订阅专栏

在项目中发现IE11下a标签点击事件无法响应，而Chrome正常。问题源于IE11的一个bug，当z-index设置为负值时，会导致元素无法获取鼠标事件。通过情景模拟，发现在IE11中，z-index为负的DOM元素无法触发点击事件。解决方法是避免使用负z-index，或者调整z-index为正，从而恢复事件的正常响应。

今天在项目中遇到一个很奇怪的问题，一个a标签的点击事件在IE11中无法响应，在chrome中却可以响应。后来经过仔细的排查问题，发现是IE11下的z-index为负出现的bug，现做如下总结。

情景模拟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .inner-1{
            position: absolute;
            height: 400px;            
            left:20px;
            top: 0;
            background-color: red;
            z-index: -1;
        }
        .inner-2{
            margin-top: 200px;
            height: 100px;
            background-color: green;
            overflow: hidden;
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body>  
       <div  class="inner-1">
            <button  onclick="alert(3)">测试</button>
        </div>
        <div class="inner-2"></div>  
</body>
</html>

界面效果如下

avatar

在chrome下，点击这个按钮，会弹出3，但是在IE11下，神奇的事情发生了，按钮根本不能点击，将鼠标放上去，没有按钮移入的默认样式，更不会触发点击事件了。给人感觉就像是这里没有按钮，事件无法穿透到这个按钮。

然后我猜测，这个应该是因为这个inner-1层的z-index为负值，致使其表现的就像有东西覆盖在其表面，使其无法获取鼠标移入的焦点。但是在IETester的测试结果中，IE8和IE9这个按钮点击时都有默认的效果，拥有明显的点击效果。因此，这就是一个IE11的专属bug。之后自己尝试将inner-1的z-index设置为1，再进行测试，结果豁然开朗！！！成功了，点击事件可以响应了。
avatar