了解浏览器渲染“怪癖”

Question

看看这个​​。

快速信息：

• 在div是500像素宽
• 里面的图像居中，CSS（余量：0自动）
• 图像周围有一个锚定标记的包装（无CSS）

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

问题：

• 是Firebug显示锚标签的尺寸不对？
• 浏览器是否错误？ （我不假）
• 发生了什么事？ :)

Answer 1

我怀疑这是因为<img>的样式是display:block。这意味着 元素（！）（与图形图像本身相反）将扩展以填充分配给它的任何宽度。请注意，当您删除display:block设置时，可预测的点击区域将回落到图像的广阔范围。

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

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

Answer 2

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

如果您不想包含边距，请将图像和定位点放在div中，然后使用边距进行定位： 0自动;