在網頁上我有一個縮略圖列表,其上方有鏈接框。由鏈接標籤包裝並可點擊。然而,在其頂部具有稍微透明的背景的鏈接框中,僅僅是文本而不是可點擊的整個框。只有鏈接框中的文本是可點擊的
這是一組縮略圖和鏈接框的HTML代碼:
<article class="recent-post-item">
<h2>
<a href="link/to/somewhere" title="Permanent link to Something">Something</a>
</h2>
<a href="link/to/somewhere" title="Something" class="thumb">
<img src="someimage.png" alt="Something" width="248" height="125" />
</a>
</article>
這是對應的樣式表:
#column-2 .recent-post-item {
height: 127px;
width: 250px;
position: relative;
border: none;
}
#column-2 .thumb {
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
#column-2 h2 {
font-size: 22px;
background-color:rgba(255,255,255,0.6);
padding: 5px 4px;
margin: 0;
position: absolute;
z-index: 1;
bottom: 1px;
left: 1px;
right: 1px;
}
而且繼承人顯示該問題的工作現場:http://fuckthepony.dk/wordpress/(我在說的縮略圖是那些在中間列)
有些人告訴我,他們沒有遇到問題。我已經在Opera上測試了Opera,Chrome和Firefox,並且問題在所有這些瀏覽器中都存在。
好笑。我可以發誓,我已經將顯示塊標記添加到'a'。您的解決方案完美運作很可愛! – paldepind