在<a> tag for lightbox

Question

I'm running a wordpress site that has a thumbnail gallery feature. Each thumb is inside an <a> tag so that the full image pops in a lightbox. The problem is that, for some reason, the a zone is behind the image and only 16px high (the thumb is 96 x 96). I can't see anything in the css that is causing this.

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的高度，这让我很生气！

Answer 1

是的，有点儿。你可以点击整个图片吧？

这是因为锚本身就是一个内联元素。如果你真的希望它与图像一样宽/高（唯一的原因就是为什么你想要给a设计样式是完全必要的）让它成为一个（内联）块：

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

Answer 2

您需要更改链接的大小。

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

，结果将是：