当浏览器缩放发生变化时，内联文本元素的高度是如何计算的？

Question

因此，内联文本元素的实际高度不仅仅是

font-size

值，而是由各个字体的指标决定，如这个答案中所述（另请参阅本文）。

因此，对于我使用的字体，上升率为 96.7%，下降率为 28.3%，总内容面积为 125%。

这意味着对于 15 像素的基本字体大小，实际元素的高度应为 18.75 像素。浏览器将其四舍五入为 19px。我可以用这个。

不同的是，当您放大或缩小时，高度会发生变化！此表显示了 Chrome 开发工具报告的虚拟 CSS 像素的高度：

缩放	高度
50%	18 像素
67%	19.5px
75%	18.67px
80%	18.75像素
90%	18.89像素
100%	19 像素
110%	19.09px
125%	18.4px
150%	18.67px
175%	18.29像素
200%	18.5px
250%	18.8像素
300%	19 像素
400%	18.75%
500%	18.8像素

这是一个相当广泛的值，并且使得尝试协调事情变得困难。我正在尝试应用填充来将背景颜色填充到完整的行高，如这个答案中所述，当计算的元素高度发生变化但填充值没有变化时，它无法可靠地工作。

所以对于问题：

1. 这些实际元素高度值是如何计算的？
2. 额外问题：有什么方法可以使其在所有缩放级别上保持一致吗？

Answer 1

部分答案：

Chrome 似乎总是将内联文本元素的高度设置为以真实设备像素为单位的整数值，并将理想高度 18.75 乘以缩放比例。例如，对于 125%，则为 18.75 * 1.25 = 23.4375。这会向下舍入为 23 个实际像素。开发工具（可能还有其他浏览器测量功能）报告真实像素除以缩放：23 / 1.25 = 18.4，这就是我的表格显示的。

除非这对 175% 不起作用...

不幸的是我还没有找到一种方法来调整相应的填充量。我想我必须回去设置

display: inline-block

，但是如果任何

span

比一行长，那么就会造成麻烦，所以我想我必须将跨度分解成单词......