为什么<a> tag sit BELOW an <img/> on screen (Firefox 4 + Chrome only!)</a>

Question

我不确定这是否是最新的Firefox和Chrome中的故障/怪癖，但我有一个<img>标记已被<a>标记封装，可将图像转换为一条链接。

问题出现在链接的点击框位于图像下方。图像也是可点击的，但图像下方的死区也是可点击的。

<img>有一个左下边距规则应用于它，我认为这是导致问题的原因，但我不明白为什么......我也尝试过使用显式{{1}关闭标签，因为这也没有解决问题。

Internet Explore 8按预期工作！不显示以下问题。它显示了图像下方的框，但在IE 8中无法点击死区。我认为它应该如何工作。

这是一张图片，用于阐明我的意思：

我刚刚添加了一条规则来限制所有</img>代码。

这是代码......

<a>

这让我抓狂！任何帮助，将不胜感激。

Answer 1

你有一个保证金。将它们移动到标签，它可能会修复它。

Answer 2

<img>下面的可点击区域是文本内容应该放在<a>元素中的位置。

如果您只希望图片区域可点击，请为<a>提供相同的宽度和高度，将其设为display: block，并将边距移至<a>。

a {
    display: block;
    width: /* width of your image */;
    height: /* height of your image */;
    text-decoration: none;
    margin-left: 20%;
    margin-bottom: 25px;
    border: 1px solid #F00;
}