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でこれが発生する原因を知っている人はいますか? 回避策を考える限り、私は本当にレンガの壁にぶつかりました。