包裝<a>標籤中的圖像錯誤包裝燈箱

我正在運行一個具有縮略圖庫功能的WordPress網站。每個拇指位於<a>標籤內，以便完整圖像在Lightbox中彈出。問題是，出於某種原因，一個區域在圖像後面，只有16px高（拇指是96x96）。我無法看到任何導致此問題的CSS。包裝<a>標籤中的圖像錯誤包裝燈箱

An example of this can be seen here

<a rev="http://www.pinksandgreen.co.uk/wp-content/uploads/2010/09/WALDE-XC14_1-200x200.png" class="wpscimg" rel="lightbox Funky paper mache deer heads" href="http://www.pinksandgreen.co.uk/wp-content/uploads/2010/09/WALDE-XC14_1.png"> 
    <img width="96" height="96" src="http://www.pinksandgreen.co.uk/wp-content/uploads/2010/09/WALDE-XC14_1-96x96.png" class="attachment-gold-thumbnails" alt="WALDE-XC14_1"> 
</a>

我似乎無法做任何事情通過HTML和CSS改變的高度和它的駕駛我瘋了！

來源

2015-05-12 Nathan

是的，那種。你可以點擊整個圖像，對吧？

這是因爲一個錨點本身就是一個內聯元素。如果你真的希望它是寬/高爲圖像（的唯一原因這是完全必要的是，當你想給造型的一）讓它成爲一個（inline-）塊：

a.thumbnail-a { display: inline-block; } 
/** OR **/ 
a.thumbnail-a { display: block; }

來源

2015-05-12 08:56:51 giorgio

謝謝，這確實讓整個區域活躍，但像坐在鏈接這意味着只有區域我可以點擊作出上述燈箱出現的是5px的左邊距。 z-index沒有影響.... – Nathan

您使用的是什麼瀏覽器？我沒有看到這種行爲... – giorgio

您需要更改鏈接的大小。

.wpscimg { 
    display: block; 
    float: left; 
}

，其結果將是：

enter image description here

來源

2015-05-12 08:57:08

謝謝。但與其他建議一樣，圖像位於鏈接的「上方」，這意味着我可以點擊的唯一區域可以顯示爲5像素的左邊距。 – Nathan

包裝<a>標籤中的圖像錯誤包裝燈箱

回答

相關問題