我带了一个DTD为HTML4 Transitional的页面，并将文档类型更改为<!DOCTYPE html>，并在其下的h1和div之间出现了额外的空间。我没有做任何其他更改标记或CSS。HTML5 vs HTML4 - 带额外空间的h1标签 - 如何删除？
JSFiddle示例：http://jsfiddle.net/ngordon/vSqkg/3/。
如果将doctype从HTML5更改为HTML4 Transitional，即使标记和CSS完全相同，也可以看到多余的空间出现并消失。
任何想法如何摆脱这个空间？
的HTML 4.01过渡DOCTYPE导致几乎标准的浏览器中的模式。 HTML5文档类型导致标准模式。
此Microsoft文章解释了差异：http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29。
它说，对于准标准模式：
内联元素有助于行高当且仅当跟随 之一是真实的。
如果元素：
包含文本字符
具有非零边框宽度
具有非零保证金
具有非零填充
有一个背景图像
先后垂直对齐设置为一个换行符不考虑这个 定义的文本字符，除非它是唯一的含量比基线
注意以外的值一个线框。在这种情况下，无论指定的 行高度如何，行箱高度仍然是行上最上面的行内箱顶部和最下面的行内箱底部。
如果img元素是表格单元格的唯一内容，则将单元格线框高度的线框 调整为零。
最关键的你的情况，这意味着包含该图像的行的高度的计算不包括strut，一个假想的内联元件应当增加线路高度的行高值h1元素。
这jsfiddle显示了一个 作为真正的文本内容站在为支柱真正span元素，你可以看到布局既与HTML 4.01的doctype过渡和HTML5文档类型相同。
这jsfiddle显示了同样的想法，只是这一次的支柱用CSS制作，像这样：
h1:before {
content: '\A0';
}
在khurram的回答的情况下，他在做什么是减少的行高h1，因此，在标准模式下，支柱的高度应小于图像的高度。这意味着整条线的高度取决于图像的高度，而不是支柱的高度。图像的高度在标准和几乎标准模式下都是相同的，因此您再也不会在模式之间呈现差异。
至于为什么将h1的行高设置为与图像的高度（25px）相匹配不起作用，但将其设置为12px，这是因为支撑不仅建立了顶部和底部，而且也是该线的基线。基线稍微高于底部以允许文本下移，对于正常大小的文本通常大约为3px。默认情况下，图像位于基线上，因此基线和底部之间的间距被添加到图像的高度以确定线条的高度。
这可以通过移动图像断基准，通过使用img { vertical-align: top }，这是在此jsfiddle所示来解决。如果你在这里修改h1行高，你会看到大于25px的值增加了行之间的间距，但是25px或更小的值不会改变该间距。
在开始应用任何其他CSS效果之前，您是否已将CSS重置http://meyerweb.com/eric/tools/css/reset/应用于您的css？
+1为你的好友。即使使用CSS重置“问题”剧照， –
仍然会发生。 – KnF
你的bug处理默认行高。
HTML4过渡性忽略了H1重线高度的内容，产生25px高的元素。 HTML5尊重H1标签的行高，相当于29px。
但明确指定25px的行高不起作用。 （当你将它改为12px时它确实有效，但这看起来更像是一种黑客）。为什么？ – ForOhFor
这就是为什么HTML5 Boilerplate有CSS重置。
您也可以将div设置为margin: 0; padding: 0;，但是您必须为每个元素执行操作，直到将它们全部击中。 Meyer在这个线程中重置CSS的答案是正确的。
这里是解决方法的一个例子：http://jsfiddle.net/mikelegacy/vSqkg/5/
很好的答案，很好的研究，并解决问题的根源。 – ForOhFor
我已经解决了这个问题，将图像的CSS设置为“display：block;”...但是在另一个上下文中，这可能不可行。 – KnF