我在这里需要一点指导...
我有 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 模块上印有图片和字符串“<< RAM MODULES”。这样做的想法是,当您单击此字符串时,它会将您带到此项目的此类别,您可以看到其中包含的所有产品;但是,如果您单击产品图片,您将进入产品描述页面。我需要的是以下内容:
重叠“不可见”(*) 类别链接和图片链接。这就是我使用 position: absolute; 的原因。在 Firefox 上它真的很棒.. 但我无法弄清楚如何在 IE6 / 7 上执行此操作。无论我做什么它都不适用于 text-indent: -9999px .. 如果我评论这个文本变得可见并且我可以点击它..但不能。我什至尝试过声明 A 的宽度和高度!
(*) 我说“不可见”是因为这个链接应该有文本.. 但你不应该看到它,因为它缩进了 -9999px。