html - 继承相对行高时，它与元素的字体大小无关。为什么？我如何使它相对？

Question

我有一个全局重置，为每个元素设置和设置 font-size：line-heightinherit

* {
  font-size:   inherit;
  line-height: iherit; }

对于html，我明确定义它们：

html {
  font-size:   16px;
  line-height: 1.25em; } /* 16×1.25 = 20 */

请注意，这line-height是以相对单位设置的。

对于h1，我定义了不同的字体大小：

h1 {
  font-size: 4em; }

我希望h1继承line-height. 1.25em生成的 line-height 应该等于 80px (16×4×1.25)。

但实际上h1'line-height仍然等于20px（与html's 相同：16×1.25=20）。

说，我有以下 HTML：

<p>foo<br>bar</p>
<h1>foo<br>bar</h1>

结果截图：

http://jsfiddle.net/M3t5y/5/

要解决这个问题，我必须明确定义h1'sline-height等于它继承的相同值：

h1 {
  font-size:   4em;
  line-height: 1.25em; }

然后line-height变得正确：

http://jsfiddle.net/M3t5y/6/

看起来是先将相对值计算成绝对值，然后再继承绝对值。或者，它可能是相对于父级的font-size，而不是元素的font-size。

问题

1. 为什么亲属line-height继承不正确？
2. 如何使相对line-height值被继承为相对于元素font-size而不是其父元素的值？

PS 标题中有一个问题类似的问题，但细节上有所不同。

Answer 1

当您使用em行高的值时，会计算行高的值，并且子元素也使用该计算值。

如果您使用裸数字，则它是用于计算子元素行高的比率。

所以使用line-height:1.25;而不是line-height:1.25em;

Answer 2

line-height在元素上计算，然后在使用时继承该元素em。如果您检查第一个示例，您会注意到 line-height 的计算值为20px(16x1.25)，而不是1.25em.

您可以使用line-height:1.25，它将在正确的元素上计算。