当浏览器缩放更改时，内联文本元素的高度如何计算？
因此，内联文本元素的实际高度不仅是font-size值，而且由单个字体的指标确定，如此答案（另请参见本文）。
因此，对于我正在使用 font ，上升为96.7％，下降为28.3％，结果是总内容区域为125％。
这意味着，对于15px的基本字体大小，实际元素的高度应为18.75px。浏览器将最高为19px。我可以与之合作。
除了缩小或缩小时，高度会改变！该表显示了Virtual CSS像素的高度，如Chrome Dev工具：
| 变焦 | 高度 |
|---|---|
| 50％ | 18px |
| 67％ | 19.5 |
| ％75％ | 18.67px |
| 80％ | 18.75px |
| 90％ | 18.89px |
| 100％ | 19px |
| 110％ | 19.09px |
| 125％125％ | 18.4px |
| 150 150 150 150 ％ | 18.67px |
| 175％ | 18.29px |
| 200％ | 18.5px |
| 250％ | 18.8px |
| 300％ | 19px |
| 400％ | 18.75％500％ |
| 500％ | 18.8px |
这是相当广泛的价值，并试图使事情变得困难。我正在尝试使用填充物来填写背景色，如
因此，对于问题：
- 这些实际元素高度值如何计算？
- 奖励问题：有什么办法可以使其在所有缩放水平上保持一致？
So the actual height of an inline text element is not simply the font-size value, but is determined by the individual font's metrics, as explained in this answer (see also this article).
So for the font I'm using, the ascent is 96.7%, the descent is 28.3%, resulting in a total content-area of 125%.
This means that for a base font size of 15px, the actual element's height should be 18.75px. The browser rounds that up to 19px. I can work with that.
Except, that when you zoom in or out, the height changes! This table shows the height in virtual CSS pixels, as reported by Chrome dev tools:
| Zoom | Height |
|---|---|
| 50% | 18px |
| 67% | 19.5px |
| 75% | 18.67px |
| 80% | 18.75px |
| 90% | 18.89px |
| 100% | 19px |
| 110% | 19.09px |
| 125% | 18.4px |
| 150% | 18.67px |
| 175% | 18.29px |
| 200% | 18.5px |
| 250% | 18.8px |
| 300% | 19px |
| 400% | 18.75% |
| 500% | 18.8px |
This is quite a wide range of values, and makes trying to align things difficult. I'm trying to apply padding to fill out the background-color to the full line-height as explained in this answer, which is not working reliably when the calculated element height changes but the padding value doesn't.
So to the question(s):
- How are these actual element height values calculated?
- Bonus question: is there any way to make it consistent across all zoom levels?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
一个部分答案：
在将理想的高度乘以18.75的理想高度乘变焦之后，Chrome似乎总是将内线文本元素的高度设置为真实设备像素的整数值。因此，例如，对于125％，是18.75 * 1.25 = 23.4375。这将被舍入至23个真实像素。开发工具（以及可能的其他浏览器测量功能）报告的真像素除以缩放：23 / 1.25 = 18.4，这是我的表所示。
除了对175％不起作用...
不幸的是，我还没有找到通过相应数量调整填充的方法。我想我必须返回设置
显示：inline-block，但是如果任何span比线长，那会导致麻烦，所以我想我' LL必须将跨度分开成言语...A partial answer:
It seems like Chrome is always setting the inline text element's height to an integer value in real device pixels, after multiplying the ideal height of 18.75 by the zoom. So for example, for 125%, it's 18.75 * 1.25 = 23.4375. This gets rounded down to 23 real pixels. Dev tools (and probably other browser measuring functions) report the real pixels divided by the zoom: 23 / 1.25 = 18.4, which is what my table shows.
Except that doesn't work for 175%...
Unfortunately I haven't found a way to adjust the padding by a corresponding amount. I think I'll have to go back to setting
display: inline-block, but that then causes trouble if anyspanis longer than a line, so I think I'll have to break the spans apart into words...