css - 继承的行高的错误渲染

Question

我已将 SPAN 包装到另一个 SPAN 中：

<span id="outer">
  <span id="inner">
    Some long text
  </span>
</span>

和 CSS：

#outer {
    font-size: 20px;
    font-family: 'Times New Roman';
    line-height: 30px;
}

#inner {
    font-family: 'Times New Roman';
}

此变体在 Opera、Safari、Chrome、FF 中呈现完全相同。文本以 30px 行高准确呈现。

如果外部 SPAN 设置了另一个字体系列，例如 Arial：

#outer {
    font-size: 20px;
    font-family: 'Arial';
    line-height: 30px;
}

• Crome 和 Safari 将文本呈现为 31px 行高。
• FF - 30.5px 行高
• Opera - 30px（如预期的那样）

为什么会发生这种情况？

注意：此标记和样式由用户在所见即所得编辑器中创建。

• JSFiddle - 正确的渲染
• JSFiddle - 错误的渲染

Answer 1

如果您查看下图，您会注意到两种字体具有不同的基线高度。Times New Roman 似乎比 Arial 短约 2px。

我不是字体渲染引擎方面的专家，但我对正在发生的事情的最佳猜测是，应用于#outer 的 1-2px 额外像素是由 Arial 高 2px 引起的。

即使#inner 中的字体是Times New Roman，渲染仍然对外部div 有影响，因为它被设置为Arial。

希望这能让您了解线高中的其他像素在哪里。

Answer 2

应用的line-height值是声明的值，正如您在浏览器中使用开发者工具所看到的那样。其余的是渲染差异，这些差异可能与继承无关，并且可能无法由作者控制。