的HTML 4.01过渡DOCTYPE导致几乎标准的浏览器中的模式。 HTML5文档类型导致标准模式。
它说,对于准标准模式:
内联元素有助于行高当且仅当跟随 之一是真实的。
如果元素:
包含文本字符
具有非零边框宽度
具有非零保证金
具有非零填充
有一个背景图像
先后垂直对齐设置为一个换行符不考虑这个 定义的文本字符,除非它是唯一的含量比基线
注意以外的值一个线框。在这种情况下,无论指定的 行高度如何,行箱高度仍然是行上最上面的行内箱顶部和最下面的行内箱底部。
如果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或更小的值不会改变该间距。