Javascript MathJax在div中的高度不正确

我试图弄明白为什么MathJax render block给我的div的高度是错误的

<div class="text-field" id='inner-text'>\(\sqrt{b^{a}\frac{\partial y}{\partial x}}\)</div>

当运行以下JS代码段时

  MathJax.typeset();
  let text = document.getElementById("inner-text");
  console.log(text.clientHeight,
              text.offsetHeight,
              text.getBoundingClientRect().height,
              window.getComputedStyle(text).getPropertyValue('height'));

控制台发出声音

41 41 41.25 "41.25px"

但是，在检查元件中：

---

实际高度与任何可通过JS访问的高度选项不一致。发生了什么以及如何才能获得准确的高度值？

问题是，创建可视化需要MathJax时间。我提出的解决方案的想法是给MathJax留出时间，当它准备好时，我们将获取元素的大小

我制作了两个版本的代码。在Firefox、Chrome和Edge中都能正常工作。。。等等

选项1:

脚本等待MathJax加载，然后再等待100毫秒完成，然后获取

内部文本的大小


var checkEx=setInterval（函数（）{
让wrap=document.getElementById（“内部文本”）；
var text=wrap.getElementsByClassName（'MathJax'）[0]；
如果（文本）{
设置超时（（）=>{
log（wrap.getBoundingClientRect（）.height，wrap.getBoundingClientRect（）.width）；
}, 100);
clearInterval（checkEx）；
}
}, 100);
.text字段{
显示：内联块；
溢出：隐藏；
最大宽度：15em；
}

\（\sqrt{b^{a}\frac{\partial y}{\partial x}}\）
非常感谢您提供的详细解决方案！我认为MathJax.typeset（）是同步的，这意味着它应该在完成时生成正确的尺寸；结果证明我错了。另一个问题：如果我有一堆包含div的MathJax（可能有很多div，因此很难指定等待渲染完成的超时值），并且我想等到所有div都具有正确的维度后再进行测量，那么什么是更有效的方法呢？我将尝试使其适用于更多“MathJax”项目…：）事实上，我找到了一个解决方案：我可以检查window.onload上的尺寸，这应该会提供所有正确渲染的尺寸。再次感谢你的帮助！
41 41 41.25 "41.25px"