4

The following example with HTML 4.01 Transitional doctype declaration, the span won't get the special gap between top and bottom.

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;    
}

But if we change it to use the HTML5 declaration <!DOCTYPE html>, the span will get the special gap.

Here is the whole example in jsfiddle (if you change the Fiddle Options's DTD to use HTML5, you will see the problem there.

4

1 回答 1

5

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

div { line-height: 12px; }

Strict（和 HTML5）DOCTYPE似乎强制执行“line-height”，就好像它是“min-height”一样。即使元素中没有任何文本，仍会应用“行高”。

过渡 DOCTYPE 在浏览器中触发“几乎标准”模式，这基本上是标准模式，有一些怪癖。

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

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

如果元素：

  • 包含文本字符
  • 具有非零边框宽度
  • 具有非零边距
  • 具有非零填充
  • 有背景图片
  • 将垂直对齐设置为基线以外的值

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

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

于 2013-06-19T02:42:43.313 回答