在HTML 4.01的doctype过渡导致浏览器几乎标准模式。 HTML5的DOCTYPE导致标准模式。
此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相匹配的图像(25像素)的高度不工作,但它设置为12px的呢,那是因为支柱建立不仅是一个顶部和底部,同时也为基线行。 基线是一个小的底部上方,以允许文本伸,正常大小的文本这通常大约3px的。 默认情况下,图像坐在基线所以基线和底部之间的间隙被添加到图像的高度来建立线的高度。
这可以通过移动图像断基准,通过使用来解决img { vertical-align: top } ,其在此示出的jsfiddle 。 如果你用h1行高鼓捣在这里,你会看到,值大于25px的增加线之间的间距,但25像素的值以下不改变间距。