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 開発者ツールを使用して、「first-Overlay」の表示をインラインに変更すると、getElementById('first-Overlay') によって返されるストリップと一緒に表示されるようになります。IE9でこれが発生する原因を知っている人はいますか? 回避策を考える限り、私は本当にレンガの壁にぶつかりました。

4

1 に答える 1

0

jQuery を使用してみましたが、まだバグが発生しました。

最終的に、私の回避策は、最初のdivの前に絶対配置などのダミーdivを追加することでした。この div は表示されないため、バグによる目に見える影響はありません。

于 2012-08-17T02:18:52.470 に答える