html - IE 9 で画像置換タグが表示されない

Answer 1

イメージマップを使用するだけで、それで完了することをお勧めします。

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

上記で指摘したとおりです。テキストのインデントが奇妙な結果になる可能性があります

次の画像の置き換えが本当に好きです： 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; 
      }

Answer 3

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。