Тег замены изображения <a> не отображается в IE 9

Question

Я пытаюсь сделать эту замену изображения для быстрой страницы в стадии разработки. Они дали мне и изображение для использования, и они хотели, чтобы я просто поместил горячие точки ссылки на две области на изображении. Это работает во всех браузерах, кроме IE, и я не знаю, почему... Я знаю, когда я снимаю комментарий с границ, я получаю значок пальца на красной границе... Есть идеи?

Вот CSS:

#container {
position: relative;
margin: 0 auto;
width: 1177px;

}

.account {
display: block;
width: 103px;
height: 31px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 0;
right: 241px;
/*border: solid 1px red;*/

}

.brochure {
display: block;
width: 208px;
height: 280px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 421px;
left: 478px;
/*border: solid 1px red;*/

}

Вот HTML-код:

<div id="container">    
<h1><a class="account" href="#">account view</a></h1>
<h1><a class="brochure" href="http://public.faulknermediagroup.com.s3.amazonaws.com/LPL/UnderConstruction/Kimball/KimballCreek_D.Bennion_BroB_Rnd7.pdf" target="new">brochure</a></h1>
<img src="kcp-underconstruction.jpg" width="1177" height="1129" alt="" />

Answer 1

Проблема с IE заключается в том, что вы перемещаете текст в ссылках с text-indent, Тогда сами ссылки являются пустыми или текстовыми, поэтому IE считает, что пользователь больше не должен нажимать на них.

Поэтому решение состоит в том, чтобы оставить текст в нужном месте, просто сделайте его невидимым, задав непрозрачность 0.

Другими словами, используйте этот CSS:

#container {
 position: relative; 
 margin: 0 auto;
 width: 1177px;
}

.account {
 font-size:31px; line-height:1;
 opacity:0; filter:alpha(opacity=0);
 width: 103px;
 white-space: nowrap;
 overflow: hidden;
 position: absolute;
 top: 0;
 right: 241px;
 /*border: solid 1px red;*/
}

.brochure {
 font-size:280px; line-height:1;
 opacity:0; filter:alpha(opacity=0);
 white-space: nowrap;
 overflow: hidden;
 position: absolute;
 top: 421px;
 left: 478px;
 width: 208px;
 /*border: solid 1px red;*/
}

Как вы можете видеть, я делаю размер шрифта таким же, как изначально был размер блока, чтобы обеспечить заполнение всего блока по вертикали. О, и мне не нужно display:block,

Answer 2

Я бы предложил вам просто использовать карту изображений и покончить с этим.

<div id="container">    
    <img usemap="#map" src="http://public.faulknermediagroup.com.s3.amazonaws.com/LPL/UnderConstruction/Kimball/kcp-underconstruction.jpg" width="1177" height="1129" alt="" />

    <map id="map" name="map">
        <area shape="rect" alt="" title="Account View" coords="831,2,935,33" href="#" target="" />
        <area shape="rect" alt="View Brochure" title="View Brochure" coords="477,420,687,703" href="http://public.faulknermediagroup.com.s3.amazonaws.com/LPL/UnderConstruction/Kimball/KimballCreek_D.Bennion_BroB_Rnd7.pdf" target="" />
    </map>
</div>

http://jsfiddle.net/tsdexter/hnSxs/1/

Бонус: добавьте rwdimagemaps и теперь он отзывчивый.

http://jsfiddle.net/tsdexter/hnSxs/2/

Answer 3

Как указано выше. текстовый отступ может иметь странные результаты

Мне очень нравится следующая замена изображения с: http://nicolasgallagher.com/another-css-image-replacement-technique/

     .brochure{
         background-color: transparent;
         border: 0;
         color: transparent;
         font: 0/0 a;
         text-shadow: none;
         //and your other styles without overrriding the above ones.
         display:block;
         width: 103px;
         height: 31px; 
      }