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

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