继承行高

的错误渲染我有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浏览器，浏览器，FF相同。文本呈现精确到30px的线条高度。

如果外SPAN设置另一个字体家庭，例如Arial字体：

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

克罗姆和Safari呈现文本作为31px行高。
FF - 30.5px的line-height
歌剧院 - 30PX（预期）

为什么出现这种情况？

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

来源

2013-01-23 ZavtraMen

不同的字体 - 不同的'行高' – Morpheus

对内部跨度应用行高：30px并不能解决问题。 – ZavtraMen

如果您比较两种字体，比如说在Photoshop中，您会看到不同的字体具有不同的大小。所以我相信'line-height'也会有所不同。 – Morpheus

如果你看看下面的图片，你会发现，这两种字体有不同的基线的高度。看起来，Times New Roman比Arial短约2px。

我不是字体渲染引擎的专家，但我最好猜测发生了什么，应用于#outer的1-2px附加像素是由Arial为2px更高造成的。

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

希望这可以帮助您了解行高的其他像素位置。

line-height comparison

来源

2013-01-23 16:20:22 Axel

好猜，但我认为这是错的。如果我们在外部和内部切换字体系列，SPANS结果是相同的。外部的TNR和内部的Arial会导致渲染时线高相同。顺便说一下，当两个SPAN字体系列都设置为TNR或Arial时，浏览器将这两种变体渲染为30px行高。当内部和外部SPAN具有不同的字体系列时，问题就开始了。 – ZavtraMen

这是因为arial比Times New Roman高2px。反转它会有同样的效果。唯一不同的是内部div与Arial将比外部div高2px。您可以通过将鼠标悬停在Firebug上的两种方案的标记上，并比较内部和外部跨度的蓝色突出显示区域来查看。 – Axel

“唯一不同的是，内部div与Arial将比外部div高2px。”但是，如果两个跨度设置为Arial，则文本呈现较低。 – ZavtraMen

应用的line-height值为声明价值，因为你可以在浏览器中使用的开发工具看。剩下的就是渲染与继承无关的差异，并且可能不受作者的控制。

来源

2013-01-23 17:16:47

是的，你是对的，这可能不是遗传问题。但我不明白为什么设置外部SPAN行高影响内部SPAN渲染。如果我们从外部删除行高并将其设置为内部，则所有渲染都很好。这是真正的问题，因为在我们所见即所得的编辑器中有指南网格和设置线条高度为30px，这完美地表明文本不与网格对齐。 – ZavtraMen

回答

相关问题