了解浏览器呈现“怪癖”

Question

看看这个fiddle。

快速信息：

• div 宽 500 像素
• 里面的图片以css居中（边距：0自动）
• 图像周围有一个锚标记包装器（无 css）

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

问题：

• 萤火虫是否显示错误大小的锚标记？
• 浏览器有问题吗？ （我假设不是）
• 发生了什么事？ :)

Answer 1

图像周围的锚标记。图像有边距。这里的auto不是0，是500和图片宽度的差/2。

如果您不想包含边距，请将图像和锚点包装在一个 div 中，然后将其定位为 margin:0 auto;

Answer 2

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

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

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