Question

以下示例使用HTML 4.01 Transitional 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>，则跨度将获得特殊差距。

以下是jsfiddle中的整个示例（如果您更改小提琴选项的DTD以使用HTML5，您将看到问题。

Answer 1

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

div { line-height: 12px; }

严格（和HTML5）DOCTYPE seem to enforce“行高”，就像它是“min-height”一样。即使元素中没有任何文本，仍然会应用“line-height”。

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

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

当且仅当以下之一为真时，内联元素才会影响行高。

如果元素：


包含文字字符

具有非零边框宽度

有非零保证金

具有非零填充

有背景图片

已将vertical-align设置为基线以外的值


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

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

HTML5 doctype导致SPAN标记在顶部和底部之间有一个特殊的间隙

1 个答案: