只有鏈接框中的文本是可點擊的

在網頁上我有一個縮略圖列表，其上方有鏈接框。由鏈接標籤包裝並可點擊。然而，在其頂部具有稍微透明的背景的鏈接框中，僅僅是文本而不是可點擊的整個框。只有鏈接框中的文本是可點擊的

這是一組縮略圖和鏈接框的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，並且問題在所有這些瀏覽器中都存在。

來源

2012-05-24 paldepind

我的意見同意以上，但使整個透明塊點擊你需要同時採取填充關閉H2和填充添加到一個代替標記。

#column-2 h2 { 
    padding: 0; 
} 

#column-2 h2 a { 
    display: block; 
    padding: 5px 4px; 
}

來源

2012-05-24 15:38:24

好笑。我可以發誓，我已經將顯示塊標記添加到'a'。您的解決方案完美運作很可愛！ – paldepind

這只是因爲a元素沒有顯示：block默認情況下。

只需添加這個小行：

#column-2 h2 a { display:block; }

來源

2012-05-24 15:25:02 zessx

這是因爲a元素是內聯元素，所以他們不採取所有父母的寬度可用。您可以將此規則添加到你的CSS：

#column-2 h2 a { 
    display: block; 
}

來源

2012-05-24 15:25:08 PanterA

只有鏈接框中的文本是可點擊的

回答

相關問題