css - 为什么 em 单位的高度有时大于适当的文本行数乘以它们的行高？

Question

考虑代码:

p {
  display: inline-block;
  font: 17px / 1.5 serif;
}

.floating {
  float: right;
  background: bisque;
  width: 10em;
  height: 9em;
}

<p>
  <span class="floating"></span>
  Line 1<br>
  Line 2<br>
  Line 3<br>
  Line 4<br>
  Line 5<br>
  Line 6<br>
  Line 7 should not break
</p>

我很难理解是什么导致浏览器(例如 Chrome 和 Safari)认为此示例中的 float block 高于行高 = 1.5 的非常统一的文本的 6 行，因此 font-size=17px结果如下所示:

而且，如果我选择 font-size=20px，结果看起来符合预期:

这是一个错误还是意料之中的事情？如果后者有效，我在哪里可以阅读以像素为单位计算结果行高的微妙之处(可能取决于字体属性)？

Answer 1

感谢 Pete , 谁想出了为什么会这样。

我们发现，与其他浏览器(例如 Firefox)相比，基于 Webkit 的浏览器处理 line-height 中的像素分数的方式略有不同。

问题中得到的line-height为17px * 1.5 = 25.5px，因此每行文字占25px，即Math.floor 被实现而不是任何其他理论上可能的选项(Math.ceil 或在奇数行和偶数行之间分布 25px 和 26px，或其他)。

因此，6 行占用的高度等于 25px * 6，150px。另一方面， float 元素的高度定义为 25.5px * 6，即 153px。

因此，从数学上讲，我们看到了一种常见情况，即集合中 floor 元素的总和小于或等于 floor -ed 这些元素的总和，或者:

, 其中 L 是一条线的高度。

这就是为什么一个可接受的解决方案是考虑 Webkit 处理像素分数的方式，即底线。这在其他浏览器中看起来是一致的(除非累积了更大的错误)，即使它们在此上下文中应用了 ceil-ing。