HTML5 doctype 导致 SPAN 标记在顶部和底部之间具有特殊间隙答案

【问题标题】：HTML5 doctype causes SPAN tag with a special gap between top and bottomHTML5 doctype 导致 SPAN 标记在顶部和底部之间具有特殊间隙
【发布时间】：2013-06-19 01:51:40
【问题描述】：

以下示例带有 HTML 4.01 过渡 doctype 声明，跨度不会得到顶部和底部之间的特殊间隙。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="background:red"><span>dark green</span></div>
</body>
</html>

CSS

span {
    background: yellow;
    color: black;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: normal;    
}

但是如果我们把它改成使用HTML5声明<!DOCTYPE html>，span就会得到特殊的间隙。

这是jsfiddle 中的完整示例（如果您将 Fiddle Options 的 DTD 更改为使用 HTML5，您将在那里看到问题。

【问题讨论】：

嗯……即使是 HTML 4.01 Strict 也能做到，嗯？
好的。有什么问题？
如果你给 <div> 一个 font-size 或 12px 而不是 <span>，这可以解决它 - 但我不知道为什么它在过渡中表现得那样。
问题是使用HTML5 doctype时如何去除span的间隙
@minitech：答案总是“怪癖模式”。 :(

标签： html css

【解决方案1】：

这与如何在 div 元素上计算“行高”有关。将 div 元素的“line-height”设置为与 span 相同的“font-size”是解决此问题的一种方法。赞this：

div { line-height: 12px; }

严格（和 HTML5）DOCTYPEs seem to enforce "line-height" 就像它是 "min-height"。即使元素中没有任何文本，“line-height”仍然适用。

Transitional DOCTYPE 在浏览器中触发“几乎标准”模式，基本上是standards mode with a few quirks。

This page 解释了“几乎标准”模式下的行高计算行为：

当且仅当满足以下条件之一时，内联元素才会影响行高。

如果元素：

包含文本字符

边框宽度非零

具有非零边距

具有非零填充

有背景图片

已将垂直对齐设置为基线以外的值

请注意，换行符不被视为此定义的文本字符，除非它是行框的唯一内容。在这种情况下，无论指定的行高如何，行框高度仍然是该行的最上面的行内框顶部和最下面的行内框底部。

如果img元素是表格单元格的唯一内容，则将单元格行框高度的行框高度调整为零。

【讨论】：

嗨，即使我指定了行高，使用 HTML5 doctype 时跨度的间隙仍然存在。
指定 div 上的行高，而不是跨度。
"严格（和 HTML5）DOCTYPE 似乎强制执行 'line-height' 就好像它是 'min-height'。即使元素中没有任何文本，'line-height ' 仍然适用。”这有点令人困惑；如果元素中没有任何文本或任何内容，则该元素的高度为零。所以line-height 在这个意义上不像min-height。