2

我已将 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(如预期的那样)

为什么会发生这种情况?

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

4

2 回答 2

1

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

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

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

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

行高比较

于 2013-01-23T16:20:22.857 回答
0

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

于 2013-01-23T17:16:47.697 回答