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

我建议您只使用图像地图并完成它。

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

图像替换<a> tag not showing up in IE 9</a>

3 个答案: