渲染继承的行高错误

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设置了另一个font-family，例如Arial：

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

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

为什么会这样？

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

• JSFiddle - right rendering
• JSFiddle - wrong rendering

Answer 1

如果查看下图，您会发现两种字体的基线高度不同。似乎Times New Roman比Arial短了约2便士。

我不是字体渲染引擎的专家，但我最好的猜测是，应用于#outer的1-2px附加像素是由Arial高2px引起的。

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

希望这可以让您深入了解行高的其他像素。

Answer 2

应用的line-height值是声明的值，您可以在浏览器中使用开发人员工具看到。其余的是呈现可能与继承无关的差异，并且可能无法由作者控制。