css - 是行高 :1 equivalent to 100%?

Question

请先看下面的片段:

body {
  line-height: 1;
}

<h1>
  Hello <br> world
</h1>

body {
  line-height: 100%;
}

<h1>
  Hello <br> world
</h1>

上一个使用line-height: 1; , 而下一个使用 line-height: 100%; .我认为它们必须相同，并且MDN似乎同意我的观点:

<number>

The used value is this unitless <number> multiplied by the element's font size. The computed value is the same as the specified <number>. In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance.

<percentage>

Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size.
Percentage and em values may have unexpected results, see "Notes" section.

在“注释”部分:

It is often more convenient to set line-height by using the font shortcut as stated in the "Examples" section above.

但实际上，它们是不同的!

我的问题是:为什么它们不同，我应该更喜欢 <number>按照 MDN 的建议？

---

我使用的是 Safari 版本 10.0.1 (12602.2.14.0.7)。

Answer 1

真正的原因是它们的工作方式不同，看一下W3C Specs for line-height就可以理解了。和 inheritance .以下是 line-height 规范中关于无单位值 ( <number> ) 和百分比值的内容。

<number> - The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.

<percentage> - The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal

作为BoltClock points out in his comment (正确地，像往常一样)，继承总是以相同的方式工作，而且总是被继承的计算值。措辞困惑是因为我指的是规范的旧版本，而新版本非常清楚并且使用了正确的词语。

指定无单位值(数字)时，指定值为line-height是数字，也是计算值。所以，h1 (child) 继承了数字 1 但它仍然需要将这个数字解析为实际的 line-height可以使用。因此，使用的值是根据规范计算的，方法是将继承因子乘以h1。元素的字体大小(即 2em = 32px)并设置 line-height作为32px .

对于百分比，line-height 的计算值在body是正文字体大小(即 16px )的 100%，因此等于 16px .现在因为这个 16px是计算值，h1 child 继承这个值并按原样使用它，因为不需要进一步的解析。

这就是为什么两个片段之间存在差异的原因，其中一个是 h1 的行高。是 16px，另一个是 32px。

---

如果我们设置 line-height: 100%直接在 h1然后我们可以看到输出匹配，因为现在 h1将其自身的行高计算为 2em(或 32px)的 100%，这与 1 * 其字体大小相同。

h1 {
  line-height: 100%;
}

<h1>
  Hello <br> world
</h1>