在我的HTML中，我有一个<div>（称之为面板），其固定宽度包含一些文字;该文本在随附的CSS中设置为font-size: 25px; line-height: 25px;。事实上，文本最终为36行。
鉴于所有边距，填充和边框均为零，您希望面板的高度为36 * 25px = 900px，这实际上是我在Firefox中使用DOM＆＃39; s getBoundingClientRect()方法。
然而，在谷歌浏览器中我获得了不同的数字;看来该面板仅为892.7999877929688px高，而线路为24.799999660915798px高。除了这两个数字仍然给出36。看起来在CSS中设置的标称像素与getBoundingClientRect()报告的实际像素之间存在缩放比例;在我的情况下，这是每实际像素1.0080645299120465名义。
另一项证据来自于在nwjs app中运行的Chromium，我最初观察到这种差异。在我的测试期间，它始终显示与Chrome中的不同的比率。现在，在我测试的某个时刻，Chromium报告的像素突然跳到Firefox中报告的整数值;我不知道我做了什么来实现这一目标。
可以预期分数比率在某种程度上与页面缩放有关;毕竟，在非常小的尺寸下，Chrome和Chromium会对文本进行重排（有时会出错）。实际上，改变Chrome中的缩放会导致不同的比例，并且Chrome放大到最大值会使比率变为1。尽管如此，我的Chromium应用程序还没有放大到最大值并仍然具有一小部分比率。测试中的整数像素比率，但实际app中的小数值。
对于我目前所知的所有，我所能做的就是获得这个比例，这样我就可以使用JavaScript进行声音，一致的盒子大小测量，就是设置一个已知大小的盒子并测量它。
我仍然想知道观察到的行为的来源是什么。有没有报道呢？它是渲染器的故意还是紧急行为？这是开发人员曾经讨论过的吗？是否有API来获得比率？
我已在https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a的要点上添加了一些代码以简化测试。
答案 0 :(得分：1)
某些字体无法以您要求的确切大小呈现，并且字体具有间接影响报告的实际大小的属性。如果你想要相同的行为，也许你必须导入自己的字体来实现类似的渲染交叉浏览。在使用IE和Chrome时，我遇到了类似的问题。