以下示例使用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,您将看到问题。
答案 0 :(得分:5)
这与在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 元素是表格单元格的唯一内容,则单元格行高度的行框高度将调整为零。