1

我对在 IE9 中显示覆盖的一些 javascript 代码有疑问，它在 Chrome、Firefox 甚至 IE8 中都可以正常工作。然而，当在 IE9 中运行时，会发生一些奇怪的事情。基本上，将鼠标悬停在区域上是为了显示带有一些文本的叠加层，但在 IE9 中，第一个叠加层正在被克隆或其他东西，所以我得到一个与第一个 div 具有相同样式和位置的条带，但没有的内容。以下是 HTML 外观的示例：

<img usemap="#mymap"/>
<map id="mymap">
<area id="first" onmouseover="ShowOverlay(this);" onmouseout="HideOverlays()";>
<area id="second" onmouseover="ShowOverlay(this);" onmouseout="HideOverlays()";>
</map>
<div id="first-Overlay" class="overlay" onmouseover="OverlayOnHover(this);" onmouseout="OverlayMouseOff(this);">
some text here.
</div>
<div id="second-Overlay" class="overlay" onmouseover="OverlayOnHover(this);" onmouseout="OverlayMouseOff(this);">
more text here.
</div>

它附加的javascript是：

<script type="text/javascript">
var PreviousOverlay;
function ShowOverlay(sender) {
    if (PreviousOverlay) {
        PreviousOverlay.style.display = 'none';
    }
    NewOverlay = document.getElementById(sender.id + '-Overlay');
    if (NewOverlay) {
        NewOverlay.style.display = 'inline';
    }
    PreviousOverlay = NewOverlay;

    return false;
}
function HideOverlays() {
    if (PreviousOverlay) {
        PreviousOverlay.style.display = 'none';
    }
    PreviousOverlay = null;
    return false;
}
function OverlayOnHover(Overlay) {
    Overlay.style.display = 'inline';
}
function OverlayMouseOff(Overlay) {
    Overlay.style.display = 'none';
}
</script>

使用 IE 中的 Web Developer 工具，我可以将“first-Overlay”显示更改为内联，然后它将与 getElementById('first-Overlay') 返回的条带一起可见。有谁知道是什么原因导致IE9出现这种情况？就想出解决方法而言，我真的碰壁了。

4

1 回答 1

0

我尝试使用 jQuery，错误仍然发生。

最后，我的解决方法是在第一个 div 前面添加一个具有绝对定位等的虚拟 div。这个 div 永远不会被显示，所以这个 bug 没有任何可见的效果。

于 2012-08-17T02:18:52.470 回答