IE6 / 7链接重叠+文本缩进

Question

我需要一点指导...

我有2个链接：

<div class="tarjBodyHolder">
    <div class="imageHolder">
        <a href="#" onclick="alert('picture link'); return false;">
           <img border="0" src="/picture.jpg" />
        </a>
    </div>
    <div class="linkTransp">
       <a href="#" onclick="alert('family link'); return false;">RAM Moudles</a>
    </div>
</div>

Css：

.tarjBodyHolder{
    position: relative; 
    clear: both; 
    height: 152px;
 }

.tarjBodyHolder .linkTransp{
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 120px;
     height: 15px;
     z-index: 6; /*IE bug*/
}
.tarjBodyHolder .linkTransp a {
     display: block;
     text-indent: -9999px; 
     width: 120px; 
     height: 15px;
     overflow: hidden;
     z-index: 6;
 }
 .tarjBodyHolder .imageHolder{
     position: absolute; 
     bottom: 0px; 
     left: 0px;/*IE 7 bug*/
 }

这是下一个：

img链接是项目的图片。这张照片上印有物品所属的类别。例如：DDR RAM模块具有图片和字符串<！> quot; <！> lt; <！> lt; RAM MODULES <！> quot;印在上面。这样做的想法是，当您单击此字符串时，会将您带到此项目的此类别，您可以看到其中包含的所有产品;但如果您单击产品图片，您将在产品说明页面中结束。我需要的是以下内容：

重叠<！>“不可见的<！>”（*）类别链接和图片链接。这就是我用过的原因 位置：绝对; 在Firefox上它真的很棒..但我无法弄清楚如何在IE6 / 7上执行此操作。无论我做什么它不适用于文本缩进：-9999px ..如果我评论这个文本变得可见，我可以点击它..但不能。 我甚至尝试过声明A宽度和高度!!

（*）我说<！>“不可见<！>”;因为这个链接应该有文本..但你不应该看到它，因为它缩进了-9999px。

Answer 1

听起来像你想要的和老式的图像地图。像这样重叠链接的项目很少是一个好主意。

我听到的是你有一张照片。部分图像（图片部分）链接到描述页面。另一部分（文本部分）链接到另一个类别的URL。

使用上面的1张图片和下面的文字链接，或者使用<！> lt; map <！> gt;标记以分割图像。

在像烟花/ Dreamweaver这样的事情上做起来相当容易。但是，如果你想打破一个好的老式文本编辑器，那就是文档：

http://www.w3schools.com/TAGS/tag_map.asp