继承的行高的错误渲染 [英] Wrong rendering of inherited line-height

问题描述

我将SPAN包裹在另一个SPAN中:

I have SPAN wrapped into another 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的行高呈现.

This variant renders exactly the same in Opera, Safari, Chrome, FF. Text is rendered exactly 30px lines height.

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

If outer SPAN is set another font-family, for example Arial:

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

• Crome和Safari将文本显示为31px行高.
• FF-行高30.5像素
• Opera-30px(按预期)

为什么会这样?

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

Note: this markup and styles is created by user in WYSIWYG editor.

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

推荐答案

如果您看下面的图片，您会注意到两种字体的基线高度都不同.看来Times New Roman比Arial短2px.

If you look at the image below, you will notice that both fonts have different baseline heights. It appears that Times New Roman is about 2px shorter than Arial.

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

I'm not an expert on the font rendering engines, but my best guess as to what is happening is that the 1-2px additional pixels applied to the #outer is caused by Arial being 2px taller.

即使#inner中的字体是Times New Roman，但由于将其设置为Arial，因此渲染仍然会对外部div产生影响.

Even though the font within the #inner is Times New Roman, the rendering still has an affect on the outer div due to it being set as Arial.

希望这能使您对行高中的其他像素有一些了解.

Hopefully this gives you some insight as to where there are additional pixels in your line-heights.

这篇关于继承的行高的错误渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！