IE6/7鏈接重疊+ TEXT-INDENT

我有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模塊」。這樣做的想法是，當你點擊這個字符串時，這將把你帶到這個項目的這個類別，你可以看到它包含的所有產品;但是如果您單擊產品的圖片，您將在產品說明頁面中結束。我需要的是以下內容：

重疊「不可見」（*）類別鏈接和圖片鏈接。這就是我爲什麼使用 position：absolute; 在Firefox上它真的很棒..但我無法弄清楚如何在IE6/7上做到這一點。無論我做什麼它不適用於文本縮進：-9999px ..如果我評論這個文本變得可見我可以點擊它..但不能以其他方式。我試過甚至宣佈寬度和高度！

（*）我說「不可見」，因爲這個鏈接應該有文字..但你不應該能夠看到它，因爲它的縮進-9999px。

來源

2009-07-31 KnF

聽起來像你想要的和老式的圖像映射。重疊像這樣的鏈接項目很少是一個好主意。

我聽到的是你有一張圖片。部分圖片（圖片部分）鏈接到描述頁面。另一部分（文本部分）鏈接到另一個類別的URL。

要麼與上面的1張圖片和下面的文本鏈接一起生活，要麼使用地圖>標籤來分割圖片。

在fireworks/dreamweaver中這樣做很容易。但是，如果你想繼承人跳出良好的老式文本編輯器中的文件：

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

來源

2009-07-31 16:38:11 ascotan

這是因爲圖像有這個字符串打印的原因。因爲在舊網站上我用圖像地圖做了這個，但我想用鏈接取代這個，所以SE可以索引這個鏈接... 感謝您的快速回復！ ^^ – KnF 2009-07-31 17:33:26

IE6/7鏈接重疊+ TEXT-INDENT

回答

相關問題