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-heightby using thefont
shortcut as stated in the “Examples” section above.
但实际上,它们是不同的！
我的问题是：为什么它们不同,我应该更喜欢< number>正如MDN所建议的那样？
我正在使用Safari Version 10.0.1(12602.2.14.0.7).
解决方法
<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的数字,但仍然需要将此数字解析为可以使用的实际行高.因此,通过将继承因子与h1元素的font-size(即2em = 32px)相乘并将行高设置为32px,可以根据规格计算使用的值.
对于百分比,body的line-height的计算值是body的font-size(16px)的100％,因此等于16px.现在,由于此16px是计算值,因此h1子级继承此值并按原样使用它,因为不需要进一步的分辨率.
这就是为什么两个片段之间存在差异的原因,因为h1的行高为16px,而另一个是32px.
如果我们直接在h1设置行高：100％那么我们可以看到输出匹配,因为现在h1计算它自己的行高为2em(或32px)的100％,与1 *的字体大小相同.
h1 {
line-height: 100%;
}
<h1> Hello <br> world </h1>
