HTML5 Doctype 搞砸了 DIV 高度？答案

【问题标题】：HTML5 Doctype screws up DIV heights?HTML5 Doctype 搞砸了 DIV 高度？
【发布时间】：2011-07-14 21:06:59
【问题描述】：

在 Mac 上的 Chrome、Safari 或 Firefox 中呈现页面时，如果我使用 HTML5 doctype

<!DOCTYPE html>

并将图像放入 div 中，该 div 始终被渲染为 4 像素太高。如果我使用旧的文档类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

div 被正确渲染，与里面的图像高度相同。这是使用完全相同的 HTML 和 CSS 代码。唯一改变的是文档类型，并且出现了额外的 4 个像素。有没有办法解决这个问题？

【问题讨论】：

你应该看看 html5reset.org

标签： css html

【解决方案1】：

http://hsivonen.iki.fi/doctype/

<!DOCTYPE html> = 标准模式 - http://jsbin.com/ogacor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> = 几乎标准模式 - http://jsbin.com/ogacor/2

要修复它，请将display: block 或vertical-align: top（或bottom）添加到img。

首先发生这种情况的原因是imgs 默认是inline 元素，并且默认vertical-align 是baseline。基线不接触包含元素的底部 - 间隙是两者之间的距离。

见：

【讨论】：

【解决方案2】：

HTML5 指定应该呈现元素中的空白。因此，如果您将这些元素的 font-size 设置为 0，那么您将获得额外的 4px，例如，空间将消失。

【讨论】：

它与 HTML5 没有任何关系。这是“标准模式”与“非”。 font-size: 0 确实可以修复它，但这不是通常的修复方法。
这不是真的，我不知道为什么它得到了 3 票。下面的答案是有效的。