イメージマップ/配置されたイメージの上にアンカーが配置されている（Firefoxの問題）

Question

Firefoxで奇妙な動作が発生しています。

私は絶対位置と中心だバナーを持っているので、私はこれを行うには、CSSのトリックのビットを使用します。

#banner { 
    position: absolute; 
    top: 85px; 
    z-index: 1; 
    width: 1280px; 
    left: 50%; 
    margin-left: -640px; 
} 

これは私のターゲットブラウザーでうまく動作します。

複雑さを加えるには、このバナーにホットスポットがあります。

画像に画像マップを付けてみました。これはIE7/8では正常に動作します。 Firefoxではうまくいきません。次に、バナーコンテナの内側にアンカーを配置しようとしましたが、これは視覚的に機能しました（つまり、アンカーに境界線を置いて正しく配置されているかどうかを確認する）が、javascriptを使用してもクリックイベントに応答しません。以下のCSSで

<div id="banner"> 
    <img src="/images/banners/splash.jpg" alt="" width="1280" height="481" usemap="#splashMap" /> 
    <a href="#" id="banner-anchor1" title="">Some Text</a>  
</div> 
    <map name="splashMap" id="splashMap"> 
     <area shape="rect" coords="174,192,304,464" href="#" alt="" /> 
     <area shape="rect" coords="277,76,397,169" href="#" alt="" /> 
     <area shape="rect" coords="306,360,415,470" href="#" alt="" /> 
     <area shape="rect" coords="662,347,763,479" href="#" alt="" /> 
    </map> 

：ここ

は、私が試したマークアップです

#banner a { 
display: block; 
text-indent: -999px; 
position: absolute; 
z-index: 2; 
left: 50%; 
border: 1px solid red; 
} 
#banner-anchor1 { 
top: 133px; 
width: 129px; 
height: 289px; 
margin-left: -467px; 
} 

アンカーとイメージマップオプションの両方がIEで動作します。

ありがたいことに、シェイプは長方形なので、柔軟性がありますが、それ以外は奇妙なケースです。

Firefoxでこれを克服する方法や、絶対配置された要素を中心に置くために使用できる別の方法はありますか？

更新

他の要素とのz屈折率の競合がありました。ボディコンテンツの周りにdivがあり、そのdivの上にバナーが置かれていました。コンテンツ・ディビジョンのZ-インデックスは、Z-インデックスが低かったにもかかわらず、FFでアンカーとのトラブルを引き起こしていました。同じ親を共有していないためです。奇妙なIEはこれにどのように問題がなかったか。

Answer 1

私の最初のヒント：イメージマップは使用しないでください。彼らは非常にユーザーフレンドリーであり、検索エンジンはリンクをたどるのに苦労します。それは非難された技術とみなされている（正式ではないが、私は信じている）。

とにかく、アンカーを配置する必要がある場所はわかりませんが、Chromeではすべてが機能しますが、#banner-anchor1の負のマージンは奇妙な場所に置かれます。 Firefoxで

すべて

例...私はリンク上のマージンを削除する場合と同様に動作するようです：そのアンカー要素に相対：http://jsfiddle.net/96etN/1/

Answer 2

は、あなたがポジションを使用していることを確認作ってみましょうか？私は視覚的な用語集で非常に似たようなことをしています。画像の上に四角形を付けて、ユーザーがクリックして文書のセクションに関する詳細情報を表示できるようにします。そして、すべてのブラウザでうまく機能します。

もう一つ注意しなければならないのは、複数の矩形をネストし、それらに対して同じオフセットが必要な場合、相対位置を親コンテナの0,0にリセットするためのラッパーが必要です。For例

<div class="myContainer"> 
<div class="myWrapper"> 
    <a href="#" id="myElement1" class="myTarget" /> 
</div> 
<div class="myWrapper"> 
    <a href="#" id="myElement2" class="myTarget" /> 
</div> 
<img src="foo" id="myTitleImage" /> 
</div> 

#myContainer { 
display: block; 
margin-left: auto; 
margin-right: auto; 
width: 80%; 
} 

.myWrapper { 
position: absolute; 
} 

.myTarget { 
position: relative; 
display: block; 
} 

#myElement1 { 
top: 10px; 
right: 10px; 
width: 50px; 
height: 20px; 
} 

etc. etc.