Firefoxで奇妙な動作が発生しています。イメージマップ/配置されたイメージの上にアンカーが配置されている(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はこれにどのように問題がなかったか。
イメージに不規則なホットスポットがある場合はどうしますか?私はあなたがその場合に他に何をするか分からない。私はあなたの例を試してみましょう。ありがとう。 – ScottE
実際にその場所にいたことはありませんでしたので、わかりません。おそらく、私がイメージマップを使用した唯一の時間だと思うかもしれませんが、それでも私はとにかに正しいページへの(隠された)リンクを追加します。 –
これはFF 3.6.13では私にとってはうまくいきません。アンカーは表示されますが、クリックできません。私は私の例を単純化しようとします - おそらく何かが他の場所で矛盾しているかもしれません。 – ScottE