理解浏览器呈现“怪癖”

Question

看看这个fiddle。

快速信息：

• div为500px宽
• 其中的图像以css为中心（margin：0 auto）
• 图片周围有一个锚标签包装（没有css）

问题：
如果您检查锚标签（firebug或其他检查器），它显示的宽度和高度与图像相同，这对我来说是正确的，但完整的div是可点击的。

问题：

• firebug是否显示锚标记的大小错误？
• 浏览器错了吗？ （我假设不是）
• 发生了什么事？ ：）

Answer 1

我怀疑是因为＆lt; img＆gt;使用display:block设置样式。这意味着＆lt; img＆gt; 元素（！）（与图形图像本身相对）将展开以填充分配给它的任何宽度。请注意，当您删除display:block设置时，可点击区域会像预期的那样回落到图像的扩展区域。

然后问题变成：如何在将可点击区域限制为图像的同时使链接图像居中？一种方法是：

div { width: 500px; text-align:center; }

Answer 2

图片周围的锚标记。图像有余量。这里auto不为0，它是500和image / 2宽度之间的差值。

如果您不想包含边距，请将图像包装并锚定在div中，然后使用margin：0 auto;