html - 了解浏览器呈现 "quirk"

Question

看看这个fiddle .

快速信息:

• div 宽度为 500px
• 其中的图像以 css 居中(margin:0 auto)
• 图像周围有一个 anchor 标记包装器(无 css)

问题:
如果您检查 anchor 标记(firebug 或其他检查器)，它会显示与图像相同的宽度和高度，这对我来说是正确的，但完整的 div 是可点击的。

问题:

• firebug 是否显示错误的 anchor 标记大小？
• 浏览器有问题吗？ (我假设不是)
• 发生了什么事？ :)

Answer 1

我怀疑这是因为 的样式是用 display:block 设置的。这意味着 元素 (!)(与图形图像本身相反)将扩展以填充分配给它的任何宽度。请注意，当您删除 display:block 设置时，可点击区域会像预期的那样退回到图像的范围内。

那么问题就变成了:如何将链接图像居中，同时将可点击区域限制为图像？一种方法是:

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