js鼠标滑过弹出层的定位IE6bug解决办法

下面是详细讲解“js鼠标滑过弹出层的定位IE6bug解决办法”的完整攻略。

问题描述

当使用JavaScript实现鼠标滑过弹出层的定位时，在IE6浏览器中会出现定位错误的问题，即定位偏移问题。这是因为IE6浏览器中对定位方式的支持不同于现代浏览器，导致JavaScript计算位置出现偏差。

解决办法

解决IE6下鼠标滑过弹出层定位的问题，可以使用以下两种方法：

1. 使用滤镜方式解决IE6定位问题

在IE6浏览器中，我们可以使用滤镜属性"expression"来解决定位问题。具体代码如下：

if(navigator.userAgent.indexOf("MSIE 6")>0){
    element.style.top = "expression(parseInt(document.documentElement.scrollTop + "+y+"))+'px')";
    element.style.left = "expression(parseInt(document.documentElement.scrollLeft + "+x+"))+'px')";
}

这段代码中使用了expression滤镜和MSIE 6判断，如果是IE6浏览器就给元素设置top和left属性。expression中的parseInt是为了把String类型的值转换成Number类型。

2. 使用JS修正定位偏移问题

在IE6浏览器中，我们可以通过JS获得正确的滚动值scrollLeft和scrollTop，再给元素设置正确的定位。具体代码如下：

if(navigator.userAgent.indexOf("MSIE 6")>0){
    element.style.top = (document.documentElement.scrollTop + y) + "px";
    element.style.left = (document.documentElement.scrollLeft + x) + "px";
}

这段代码中使用了MSIE 6判断和JS计算scroll值，给元素设置top和left属性。在IE6浏览器中，document.documentElement.scrollTop和document.documentElement.scrollLeft会正确获取到滚动值。

示例说明

下面是两条使用JS修正定位偏移问题的示例说明。

示例1

纯JS实现鼠标滑过弹出层的定位，并使用JS修正定位偏移问题。具体代码如下：

<button id="btn">弹出层</button>
<div id="popup" style="display: none">弹出内容</div>

<script>
var btn = document.getElementById('btn');
var popup = document.getElementById('popup');

btn.onmouseover = function(e) {
    var x = e.clientX;
    var y = e.clientY + 20;
    popup.style.top = (document.documentElement.scrollTop + y) + "px"; // 使用JS修正定位偏移问题
    popup.style.left = (document.documentElement.scrollLeft + x) + "px"; // 使用JS修正定位偏移问题
    popup.style.display = 'block';
}

btn.onmouseout = function() {
    popup.style.display = 'none';
}
</script>

在IE6浏览器中，鼠标滑过弹出层定位会出现偏差，但是使用上面的代码就能够解决。

示例2

使用jQuery实现鼠标滑过弹出层的定位，并使用JS修正定位偏移问题。具体代码如下：

<button id="btn">弹出层</button>
<div id="popup" style="display: none">弹出内容</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var btn = $('#btn');
var popup = $('#popup');

btn.mouseover(function(e) {
    var x = e.clientX;
    var y = e.clientY + 20;
    popup.css({
        top: (document.documentElement.scrollTop + y) + "px", // 使用JS修正定位偏移问题
        left: (document.documentElement.scrollLeft + x) + "px" // 使用JS修正定位偏移问题
    }).show();
})

btn.mouseout(function() {
    popup.hide();
})
</script>

使用jQuery实现鼠标滑过弹出层的定位，同样存在定位偏移问题。但是使用上面的代码就能够解决。