我需要一些指导...
我有 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 上执行此操作。无论我做什么它都不适用于文本缩进:-9999px..如果我评论这个文本变得可见并且我可以点击它.. 但否则不能。 我什至尝试过声明 A 的宽度和高度!!
(*) 我说“不可见”是因为这个链接应该有文字..但你不应该看到它,因为它缩进了 -9999 像素。
最佳答案
在我看来,您想要的是老式图像映射。像这样重叠链接项很少是个好主意。
我听说你有一个形象。图片的一部分(图片部分)链接到描述页面。另一部分(文本部分)链接到另一个类别的 URL。
要么使用上面的 1 张图片和下面的文本链接,要么使用
在 Fireworks/Dreamweaver 之类的软件中很容易做到这一点。但是,如果您想开发一个优秀的老式文本编辑器,请参阅文档:
关于css - IE6/7 链接重叠+文本缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1213465/