HTML 4.01 Transitional 文档类型导致浏览器中几乎标准模式。 HTML5 文档类型导致标准模式。
这篇 Microsoft 文章解释了其中的差异：http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29 .
它说对于几乎标准模式：
内联元素对行高有贡献当且仅当以下之一
以下是正确的。
如果元素：
包含文本字符
具有非零边框宽度
具有非零边距
有非零填充
有背景图片
垂直对齐设置为基线以外的值
请注意，换行符不被视为文本字符
定义，除非它是行框的唯一内容。在这种情况下，
行框高度仍然是最上面的行内框顶部，并且
行中最下面的行内框底部，无论指定如何
行高。
如果 img 元素是表格单元格的唯一内容，则行框
细胞系框高度的高度调整为零。
最重要的是，在您的情况下，这意味着包含图像的行的高度的计算不包括strut，一个虚构的内联元素，应将行高增加到h1元素。
This jsfiddle显示出真实的span元素与 作为替代支柱的真实文本内容，您可以看到 HTML 4.01 Transitional 文档类型和 HTML5 文档类型的布局相同。
This jsfiddle显示了相同的想法，只是这次支柱是使用 CSS 构建的，如下所示：
h1:before {
content: '\A0';
}
就 khurram 的回答而言，他正在做的是降低行高h1因此，在标准模式下，支柱的高度小于图像的高度。这意味着整个线条的高度由图像的高度决定，而不是支柱的高度。标准和几乎标准模式下的图像高度相同，因此您不会看到两种模式之间的渲染存在差异。
至于为什么要设置line-heighth1匹配图像的高度 (25px) 不起作用，但将其设置为 12px 可以，这是因为支柱不仅建立了顶部和底部，还建立了线条的基线。基线略高于底部，以允许文本下降，对于正常大小的文本，通常约为 3 像素。默认情况下，图像位于基线上，因此基线和底部之间的间隙会添加到图像的高度中，以确定线条的高度。
这可以通过将图像移离基线来解决，方法是使用img { vertical-align: top }，如图所示jsfiddle。如果您在此处修改 h1 行高，您会发现大于 25 像素的值会增加行之间的间距，但 25 像素或更小的值不会改变该间距。
