在此示例中，为什么无单位行高的行为与百分比或em有所不同？

我对以下CSS的行为感到困惑，在这个小提琴中也对此进行了说明。

<style type="text/css">
p {
    font-size: 14px;
}

.percentage {
    line-height: 150%;
}

.em-and-a-half {
    line-height: 1.5em;
}

.decimal {
    line-height: 1.5;
}

.smaller {
    font-size:50%;
}

.caption {
    font-weight: bolder;
    font-size: 80%;
}

</style>

<p class="caption">default line spacing</p>

<p>This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p>This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 150%</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5em</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

前两段具有默认的行距。第二段有一个较小的词。但这不会影响该段中的行距。并非应该如此，但是-

接下来的两段有line-height: 150%。同样，第二段有一个较小的词。但是这一次，由于原因不清楚，较小的字体在前两行之间（至少在Safari，Chrome，Firefox和Explorer中）创建了额外的空间。这是我试图修复的CSS中的原始问题。（我推测这与浏览器缩小单词然后垂直向下移动以重新对齐基线有关。）

接下来的两段有line-height: 1.5em。我的理解是1.5em和150%。确实，行为是相同的：第二段的前两行之间有多余的空间。

但是这里很奇怪：接下来的两段都有line-height: 1.5-没有指定单位。这次，多余空间的问题消失了。

总而言之，当父级和子级的行高不同时（通过继承无单位值），CSS似乎给出一致的行距结果，而当父级和子级的行高相同时，CSS给出的行距结果不一致。

因此，我的问题是：

1. 我知道CSS规范之间1.5和150%或它的同义词之间存在故意的语义差异1.5em。（即：将无单位值传递给子元素，并使用子字体的字体大小计算其线高，而百分比或em值将导致为父元素计算线高，然后将该计算值传递给这个孩子。）但是，这如何解释这里看到的行为差异？多余的空间从哪里来？如果是某些CSS定位规则的结果，那么该规则是什么？

2. 或者，如果这些示例都应以相同的方式呈现，那么哪个实现不正确？（关于第2季度的说明：在不同的浏览器上呈现渲染异常的事实强烈表明，没有一个实现不正确，这将带您回到问题（1）。）

3. 在实际应用中，是有缺点切换到无单位的测量样 1.5 的 line-height ？ （答案：否）