font-size - 为什么内联元素的内容区域的高度大于 font-size 指定的值？

Question

在像这样的文件中：

    <p class="包装器">
        <span class="ref">
        <span class="text">英文</span>
    </p>
    

适用以下规则：

    .wrapper {
      背景：绿色；
      位置：相对；
      填充左：20px；
      字体系列：时代；
    }
    。文本 {
      行高：1；
      背景：蓝色；
      字体大小：80px；
    }
    .ref {
      位置：绝对；
      左：5px；
      宽度：10px；
      高度：80px；
      背景：黑色；
    }
    

在 Chrome（版本 22.0.1229.79）或 IE9 中，包含“English”的 span 元素的背景似乎具有大于 font-size 的高度，但在 Firefox (13.0.1) 中，高度等于 font-size。（见输出）

有人可以解释一下吗？

我认为内容区域的高度与字体大小指定的值相同。

Answer 1

下图显示了渲染文本时可用的各种参考线：

如您所见，有很多选择。似乎 Firefox 在渲染时使用了与 Chrome/IE 不同的基线。