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

这个div将具有104.5px一个计算高度（在最近的铬，FF和IE）为什么包含图像的DIV的高度膨胀4.5px？

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

这个div将具有100像素

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

我用萤火虫一个计算高度看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？ –

没有其他syles应用。我删除了样式表，并使用了我提供的代码。所以没有填充或应用于DIV的边距，也没有使用外部样式表。 O.K.W - 第一个例子中箱子模型的计算高度为100px？ –

客户端包含他们自己的样式表，在尝试执行任何像素完美的布局或跨浏览器调试之前，应该对其进行过度分析。即使您删除了所有样式表，页面上仍有样式。

用样式表顶部的css重新尝试一次。另外，请确保您声明了有效的文档类型。使用严格的文档类型，并确保您的代码验证，如果仍然没有帮助。

我通常使用meyer web重设，并进行一些适合我工作流程的小修改。

如果其他人看到100px，那么这可能是一个客户端问题，所以希望能为您解决这个问题。

2010-02-23 02:52:39

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

2010-02-23 02:30:07 hunter

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

2010-02-23 03:32:43

这里一定有更多的事情比你展示的要多。你如何测量这些半像素？你使用什么工具？我可以看到行高正在发挥作用，但您不会在样本中显示。

2010-02-23 03:38:53 Rob

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

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

您可能仍然希望在整个网站中重置文本时使用此行高度设置，但请尝试将line-height:0仅应用于除div之外的其他内容。

2012-08-24 02:20:58 squarecandy

回答