Карта изображения / позиционированный якорь поверх позиционированного изображения (проблема Firefox)

Question

Я замечаю странное поведение в Firefox.

У меня есть баннер, который расположен абсолютно по центру, поэтому я использую немного трюка CSS, чтобы сделать это:

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

Это прекрасно работает во всех браузерах.

Чтобы добавить сложности, этот баннер имеет горячие точки.

Итак, я попытался прикрепить карту изображения к изображению. Это прекрасно работает в IE7 / 8. Не повезло с Firefox. Затем я попытался поместить якорь внутри контейнера баннера, который работал визуально (то есть я поставил границу якоря, чтобы увидеть, правильно ли он был расположен), но он не реагирует на событие щелчка, даже с использованием javascript.

Вот разметка, которую я пробовал:

<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>

Со следующим css:

#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-индекс в содержимом div вызывал проблемы в FF с якорями, хотя z-индекс был ниже - я думаю, потому что они не имеют одного и того же родителя. Странно, как у IE не было проблем с этим.

Answer 1

Попробуйте убедиться, что используете позицию: относительную на этом элементе Anchor?Я делаю что-то очень похожее в визуальном глоссарии, где я отмечаю прямоугольники поверх изображения, чтобы позволить пользователям щелкать и видеть больше информации о разделах документа, и это прекрасно работает во всех браузерах.Следует отметить, что если вы собираетесь вложить несколько прямоугольников и хотите иметь одинаковые смещения для них, вам понадобится обертка для сброса относительной позиции на 0,0 вашего родительского контейнера, например

<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.

Answer 2

Мой первый совет: не используйте изображения. Они очень недружелюбны к пользователям, и поисковым системам тоже трудно переходить по ссылкам. Это считается устаревшей техникой (хотя, я думаю, не официально).

В любом случае, я не знаю, как это должно выглядеть (где должен располагаться якорь?), Но в Chrome все это работает, кроме отрицательного поля на #banner-anchor1, которое ставит его в странное место.

В Firefox, кажется, все работает, если я уберу поле на ссылке ...

Пример: http://jsfiddle.net/96etN/1/