为什么em的行为不符合定义

一个的高度线箱是未由下式确定font-size.或者至少不是直接的.

您可以在规范中查看详细规则.当行框仅包含非替换用相同的内框line-height和vertical-align,那些规则说,行框的高度将被给予line-height的行内框.

这适用于您的情况,因为直接包含在块容器元素中的文本包装在匿名内联框中.

如果未设置line-height任何显式值,则行框的高度将由line-height,, 的初始值给出normal,其行为如下:

告知用户代理根据元素的字体将使用的值设置为"合理"值.该值与具有相同的含义 .我们建议使用1.0到1.2之间的"正常"值.该计算出的值是"正常".

例如,如果浏览器选择1.15,1em将覆盖1/1.15 = 0.8696线的高度.那是如此接近7/8 = 0.8750你所观察到的.

注意匿名内联框line-height从块父框继承可继承的属性.然后,您可以将line-height块的长度设置为显式长度,并将该长度的高度乘以行数.

#my-div {
  line-height: 1.2em;
  height: calc(1.2em * 8);
  background: red;
}

One
Two
Three
Four
Five
Six
Seven
Eight

div {
  background-color: red;
  height: 8em;
  line-height: 1em;
}