为什么包含图像的 DIV 的高度会膨胀 4.5px？答案

【问题标题】：Why is the height of DIVs containing images inflated by 4.5px?为什么包含图像的 DIV 的高度会膨胀 4.5px？
【发布时间】：2012-08-24 10:20:58
【问题描述】：

此 div 的计算高度为 104.5px（在最新的 Chrome、FF 和 IE 中）

<div><img src="" height="100px" /></div>

这个 div 的高度是 100px

<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>

我使用 FireBug 查看了 DIV 和 IMG，两个 IMG 的边距、内边距和边框都为 0，但在第一个实例中计算的高度不知何故大了 4.5px。

这是为什么？当我尝试使用一致的垂直网格布局页面时，它会影响我。理想情况下，我不想让 imgs 浮动。

我试着看这里 ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2，我什至试过 vspace=0，但这并没有改变任何东西。

感谢您的帮助！

【问题讨论】：

在我的 FF3.6 上渲染为 100px 高度。您是否还有其他可能导致问题的样式？
是否对 div 应用了任何填充或边距？
未应用其他样式。我删除了样式表，只使用了我提供的代码。因此，没有对 DIV 应用填充或边距，也没有使用外部样式表。 O.K.W - 第一个示例中盒子模型的计算高度是 100 像素？
@Peter，我不知道这是问题所在，但您不应在 img 属性中包含 px。很简单，<img src="" height="100" />
@Doug 感谢您的信息。你的来源是什么？使用 px 作为单位在 XHTML 1.0 strict 中有效（与不使用单位、em、pt 或 % 一样）。我喜欢包含 px 以供我自己参考，因为有时我使用 em 或 %，所以包含单位可以让事情变得清晰。

【解决方案1】：

客户端包含他们自己的样式表，在您尝试进行任何像素完美的布局或跨浏览器调试之前应该覆盖这些样式表。即使您删除了所有样式表，页面上仍然存在样式。

在您的样式表顶部重新设置 css 再试一次。此外，请确保您声明了有效的文档类型。使用严格的 doctype 并确保您的代码验证是否仍然没有帮助。

我通常使用 meyer 网络重置并进行一些适合我的工作流程的小修改。

如果其他人看到 100 像素，则可能是客户端问题，因此希望这能为您解决问题。

【讨论】：

【解决方案2】：

我使用Yahoo! CSS Reset 让我的浏览器从头开始，通常会有所帮助。

【讨论】：

【解决方案3】：

当应用于仅包含图像的 div 时，请注意高级别的 line-height 定义。（例如html {line-height:1.5em;}）

一般来说，您可能仍希望使用此行高设置来重置整个网站的文本，但请尝试将 line-height:0 仅应用于其中只有一个 img 的 div。

【讨论】：

【解决方案4】：

设置<div style="display:inline" /> 应该可以解决您的问题。

【讨论】：

【解决方案5】：

这里肯定比你展示的更多。你如何测量这些半像素？你用的是什么工具？我可以看到 line-height 发挥作用，但你没有在你的样本中显示出来。

【讨论】：

就像我说的，我使用 FireBug 来测量 div 的计算高度。如果我添加具有均匀间隔线的背景图像，当我将第一个 div 的多个实例堆叠在另一个之上时，我也会看到这种情况。我没有设置行高，除了示例中没有设置其他样式。