IE 获取不到元素 img标签层级默认变高

最新推荐文章于 2025-05-13 15:35:22 发布

原创最新推荐文章于 2025-05-13 15:35:22 发布 · 261 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ie #javascript #html #css #js

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

javaScript

5 篇文章

订阅专栏

作者在兼容IE8的项目中，遇到移入元素时获取不到元素的问题。经大量实验发现，只有元素底下是img时才会触发该bug，原因是IE中Img默认层级变高，IE10以下都存在此问题。作者给出的解决方法是给div添加背景颜色或background:url(about:blank)。

笔者在做一个要兼容ie8的项目,有一个移入和移出的效果，但发现移入元素的时候获取不到元素。
上代码----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 50px;
            height: 50px;
            position: absolute;
            border: 1px solid black;
            /* background:url(about:blank) */
        }

        img {
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>
    <img class="one_licheng" src="https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=138126325,1485620701&fm=218&app=92&f=JPEG?w=121&h=75&s=7FAB2EC3909A35D01E299C1A030010D2" alt="图片失败请自行在网上查找">
    <div id="Div"></div>
</body>

</html>
<script>
    var getDiv = document.getElementById('Div');
    getDiv.onclick = function () {
        console.log(1)
    }
    document.onmousemove = function (e) {
        console.log(e.target, e.target.offsetWidth)
    }
</script>

笔直一开始以为在ie中onmouseenter有问题，后期做大量实验发现问题并不出现再在这里，从而发现了只有元素的底下是img才会触发这个bug，又接着大量的查找，发现在ie中Img默认层级会变高导致元素获取失败。ie10以一下都存在这个问题。
解决方法怎笔者例子中
给div 添加背景颜色或者background:url(about:blank) 内容为空。笔直目前只发现者这一种解决方法，若有其他解决方案一定要评论，告诉笔者呦~