IE10浏览器，父元素中的有图片定位后，其余子元素定位点击事件失效

最新推荐文章于 2023-12-26 11:02:41 发布

鱼活在水中

最新推荐文章于 2023-12-26 11:02:41 发布

阅读量372

点赞数

分类专栏： JavaScript 文章标签： js css javascript jquery

本文链接：https://blog.csdn.net/qq_39480597/article/details/106216986

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天分享一下关于IE10的bug：

项目需求兼容IE10，但是在兼容过程中发现一个神奇的事情，就是当一个父元素中有图片，有其他元素时，先把img定位，z-index设置为16，div设置为20，这时候，正常来讲，，点击div应该有正常事件的触发，但是IE10中却无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="father">
        <img class="img" src="https://pics0.baidu.com/feed/c83d70cf3bc79f3d5ebcc171e6486217738b2905.jpeg?token=3ebd379de5631597ff08f81a7aa1ef97&s=F73A5CCBCE686815530D89120300C053" alt="">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $('.left').click(function() {
        alert('left click')
    })
    $('.right').click(function() {
        alert('right click')
    })
</script>
<style>
    .father {
        position: relative;
        width: 400px;
        height: 200px;
        background: #434343;
    }
    .img {
        width: 400px;
        height: 200px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 16;
    }
    .left {
        width: 100px;
        height: 100px;;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 20;
    }
    .right {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 20;
    }
</style>

此时在Google中点击，两个子元素的点击事件均可以正常触发

在IE10浏览器中，点击事件均无效果，通过一些列观察，发现，元素根本找不到。。

元素都没有，所以点击事件妥妥的是无效的~~~

通过查阅资料发现，大佬们提供的思路，发现只要给diiv设置的背景色，神奇的一幕就发生了！

    .left {
        width: 100px;
        height: 100px;;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 20;
        background: #903;
    }
    .right {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 20;
        background: #777;
    }

正常了！！！！终于正常了！！！！！

鱼活在水中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE10浏览器，父元素中的有图片定位后，其余子元素定位点击事件失效

今天分享一下关于IE10的bug：项目需求兼容IE10，但是在兼容过程中发现一个神奇的事情，就是当一个父元素中有图片，有其他元素时，先把img定位，z-index设置为16，div设置为20，这时候，正常来讲，，点击div应该有正常事件的触发，但是IE10中却无效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫