为什么Firefox对待Helvetica与Chrome不同？

Question

在Helvetica中呈现的文本的垂直位置及其内容区域的大小因Firefox和Chrome for Mac而异。例如，在Chrome中，如果行高与font-size相同，则会下移下划线。

（我已调整了此图片中块元素的位置 - 保持基线一致 - 以说明大小和文本定位的差异）。如果你有Mac，你可以看到我在说什么in this JS Bin。

现在，我并不直接对如何解决这一特定差异感兴趣。我意识到有hand-tuned reset stylesheets试图消除或记录差异，但我特别感兴趣的是导致这些浏览器首先以不同方式呈现的因素。

我在这里做了一些假设：

• 在标准框模型中，字体的渲染以及字形的大小和位置都存在标准，但在它们如何交互方面可能未指定。

• 浏览器制造商对上述标准的解释存在漏洞，这可能会影响文本的大小，定位和呈现方式。

• 对于这些特定的浏览器，许多设计讨论和实际实现都是以某种形式公开的。因此，如果有人知道在哪里看，就可以了解这些差异的来源。

• 两个浏览器都在同一个地方开始 - 标记，样式和字体定义在它们之间是一致的。在某些时候，他们在如何利用这些产生最终产出方面存在分歧。

因此，我的具体问题是： 其中在此过程中发生了这种分歧，而 会导致它发生？

我觉得，凭借这些知识，我可以更好地理解如何纠正这种差异。在这种情况下，特别是在我将来可能遇到的类似情况中。

Answer 1

不幸的是，重新：基于字体CSS2.1 does not say much at all：

呈现内容区域

  

内容区域的高度应基于字体，但此规范未指定方式。 UA可以例如使用em-box或字体的最大上升和下降。 （后者将确保包含在em-box上方或下方的部分的字形仍然落在内容区域内，但导致不同字体的不同字体的盒子;前者将确保作者可以控制相对于“行高”的背景样式，但导致在其内容区域之外绘制字形。）

换句话说，排版以及如何精确地绘制和定位线框的内容区域，由浏览器自己的实现决定，至少在CSS2.1中如此。然而，这可能在未来的规范中更好地定义（可能是Fonts module，如果不是单独的模块 ¹ ）。

Section 10.8.1包含有关line-height属性如何影响内联流文本内容区域呈现的一些细节，但同样取决于内容区域本身的高度，如上所述在CSS2.1中未定义。

请注意，auto不是line-height的有效值;您可能打算使用normal，这也是它的初始值（但不一定是浏览器默认值）。此外，这是规范中关于值normal：

的说法

  

<强>正常
  告知用户代理根据元素的字体将使用的值设置为“合理”值。该值具有相同的含义。我们建议使用1.0到1.2之间的“正常”值。计算值为“正常”。

正如您所看到的，即使是在比较line-height: normal和line-height: 1（或1em或100%）方面，也没有什么可继续的，因为“正常”行高由浏览器决定。但是，当要求使用正常的行高时，Chrome和Firefox看起来很好地将字形保持在合理的边界内。

顺便说一句，Chrome不会剪切下降器。它确实将它们呈现在内容框之外，但除非您设置overflow: hidden，否则它不应将它们剪切到框的边界。

---

¹ _{line-height属性的CSS3定义目前位于this module，但很明显它已经被遗弃，或者至少等待重写。处于当前状态的模块非常详细，但可以说它在很大程度上被浏览器供应商和工作组忽略了。}

Answer 2

• '行高是自动'=＆gt;浏览器可以选择。
• '行高=字体大小'=＆gt;用户错误：文本将难以辨认，浏览器进行一些调整也是合理的，也是必不可少的。

你必须使用一些领先的。例如，书籍可以在12pt行间距设置为10pt。