我拿了一个DTD为HTML4 Transitional的页面,并将doctype更改为,<!DOCTYPE html> 并在h1和div之间出现了额外的空格.我没有对标记或CSS进行任何其他更改.
JSFiddle示例:http://jsfiddle.net/ngordon/vSqkg/3/.
如果将doctype从HTML5更改为HTML4 Transitional,即使标记和CSS完全相同,您也可以看到额外的空格出现并消失.
知道如何摆脱那个空间吗？
Alo*_*hci 12
HTML 4.01 Transitional doctype在浏览器中导致Almost Standards模式.HTML5 doctype导致标准模式.
这篇微软文章解释了它的不同之处:http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29.
它表示对于几乎标准模式:
当且仅当下列之一为真时,内联元素才会影响行高.
如果元素:
包含文本字符
具有非零边框宽度
具有非零保证金
有一个非零填充
有背景图片
将vertical-align设置为基线以外的值
请注意,换行符不被视为此定义的文本字符,除非它是行框的唯一内容.在这种情况下,无论指定的行高如何,行框高度都保持在行的最上面的内联框顶部和最下面的内联框底部.
如果img元素是表格单元格的唯一内容,则单元格行高度的行框高度将调整为零.
最重要的是,在你的情况下,这意味着包含图像的线的高度的计算不包括strut假想的内联元素,该元素应该将线高度增加到h1元素的行高值.
这个jsfiddle显示了一个真实的span元素,其中有一个 真正的文本内容代表strut,你可以看到HTML 4.01 Transitional doctype和HTML5 doctype的布局相同.
这个jsfiddle显示了相同的想法,只是这次使用CSS制作了支柱,如下所示:
h1:before {
content: '\A0';
}
在khurram的回答中,他正在做的是减小线的高度,h1因此,在标准模式下,支柱的高度要小于图像的高度.这意味着整个线的高度由图像的高度决定,而不是由支柱的高度决定.在标准和几乎标准模式下,图像的高度都是相同的,所以再次看不出模式之间的渲染差异.
至于为什么设置h1匹配图像高度(25px)的行高不起作用,但设置为12px,这是因为strut不仅建立了顶部和底部,而且还建立了一个基线.线.基线略高于底部以允许文本下降,对于正常大小的文本,通常约为3px.默认情况下,图像位于基线上,因此基线和底部之间的间隙会添加到图像的高度,以确定线条的高度.
这可以通过使用img { vertical-align: top }这个jsfiddle中显示的图像离开基线来解决.如果你在这里修改h1线高,你会发现大于25px的值会增加线之间的间距,但是25px或更小的值不会改变那个间距.
| 归档时间： |
|
| 查看次数： |
3416 次 |
| 最近记录： |