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

以代码为例：

p{
显示：内联块；
字体：17px/1.5衬线；
}
.漂浮{
浮动：对；
背景：bisque；
宽度：10em；
高度：9公分；
}

第1行

第2行

第3行

第4行

第5行

第6行

第7行不应该中断

感谢，他想出了为什么会发生这种情况的想法

我们发现，与其他浏览器（如Firefox）相比，基于Webkit的浏览器在处理

行高中的像素分数方面有点不同

问题中产生的
行高
为
17px*1.5=25.5px
，因此，每行文本占用25px，即
Math.floor
，而不是任何其他理论上可能的选项（
Math.ceil
或在奇偶行之间分配25px和26px，或其他任何选项）

因此，6行占据的高度等于
25px*6
，150px。另一方面，浮动元件的高度定义为
25.5px*6
，或者简单地说是153px

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

，其中L是线的高度

这就是为什么一个可接受的解决方案是考虑Webkit处理像素分数的方式，即地板。这在其他浏览器中看起来是一致的（除非累积了更大的错误），即使它们在这个上下文中应用了
ceil
-ing。
我无法复制这个问题。。。任何给定的字体大小，我都能得到你想要的结果。您使用的浏览器是什么？@A.Meshu，我的浏览器版本是：Google Chrome 71.0.3578.98（官方版本）（64位）修订版152340344D19B85DCD9A03B164AE89D04145D8368 refs/branch heads/3578@{897}FF 68实际工作正常。。。也许这是chrome的错误。可能与chrome在线条高度上渲染这些半像素的方式有关-如果你从浮动框的大小中删除3px（对于6组0.5px），它会按照你的意愿浮动。我猜每一个奇怪的字体大小都会出现错误（这就是为什么它适用于20px）-更改为任何奇怪的字体大小并删除那些3px应该会使框正确浮动