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

【问题标题】：Why is height in em units sometimes greater than appropriate count of text lines multiplied by their line height?为什么以 em 为单位的高度有时大于适当的文本行数乘以它们的行高？
【发布时间】：2019-08-22 20:23:14
【问题描述】：

考虑代码：

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）认为此示例中的浮动块高于 6 行非常统一的文本，行高 = 1.5，因此在 font-size=17px结果如下所示：

而且，假设我选择 font-size=20px，结果看起来像预期的那样：

这是一个错误还是非常预期的事情？如果后者是有效的，我在哪里可以阅读以像素为单位计算结果行高的细节（可能取决于字体属性）？

【问题讨论】：

我无法复制这个问题......使用任何给定的字体大小，我都能得到你想要的结果。你用的是什么浏览器？
@A.Meshu，我的浏览器版本是：Google Chrome 71.0.3578.98 (Official Build) (64-bit) Revision 15234034d19b85dcd9a03b164ae89d04145d8368-refs/branch-heads/3578@{#897}
FF 68 实际上按预期工作......也许这是一个 chrome 错误。
可能与 chrome 在行高中呈现那些半像素的方式有关 - 如果从浮动框的大小中删除 3px（对于 6 组 0.5px），它会浮动为你想要它。我猜这个错误会出现在每个奇怪的字体大小（这就是为什么它适用于 20px）
jsfiddle.net/90gLrj8b - 更改为任何奇怪的字体大小并删除那些 3px 应该使框正确浮动

标签： css

【解决方案1】：

向Pete 致敬，他想出了为什么会发生这种情况。

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

问题中得到的line-height是17px * 1.5 = 25.5px，结果每行文本占用25px，即Math.floor被实现，而不是任何其他理论上可能的选项（Math.ceil或分配25px以及奇偶线之间的 26px，或其他）。

因此，6 行占据的高度等于25px * 6, 150px。另一方面，浮动元素的高度被定义为25.5px * 6，也就是153px。

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

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

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

【讨论】：