div中的MathJax高度不正确

Question

我试图弄清楚为什么 MathJax 渲染块给了我错误的 div 高度。代码是

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

使用 CSS

.text-field {
    display: inline-block;
    overflow: hidden;
    max-width: 15em;
}

当下面的 JS sn-p 运行时

  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 访问的任何高度选项都不一致。这是怎么回事，如何才能获得准确的高度值？

Answer 1

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

我制作了两个版本的代码。两者都可以在 Firefox、Chrome、Edge... 等中正常工作。

选项 1：

脚本等待 MathJax 加载，然后再给它 100 毫秒来完成，然后采用 inner-text 的大小

var checkEx = setInterval(function () {
    let wrap = document.getElementById("inner-text");
    var text = wrap.getElementsByClassName('MathJax')[0];
    if (text) {
        setTimeout(() => {
            console.log(wrap.getBoundingClientRect().height, wrap.getBoundingClientRect().width);
        }, 100);
        clearInterval(checkEx);
    }
}, 100);

.text-field {
    display: inline-block;
    overflow: hidden;
    max-width: 15em;
}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>


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

---

选项 2

脚本等待 MathJax 加载，然后开始获取元素的大小。当大小停止变化时...返回inner-text的大小

var elhg;
var elwg;

var checkEx = setInterval(function () {
    let wrap = document.getElementById("inner-text");
    var text = wrap.getElementsByClassName('MathJax')[0];
    if (text) {

        elHeight = wrap.getBoundingClientRect().height;
        elWidth = wrap.getBoundingClientRect().width;

        if (elhg === elHeight && elwg === elWidth) {
            console.log(elHeight, elWidth);
            clearInterval(checkEx);
        }

        elhg = elHeight;
        elwg = elWidth;
    }
}, 100);

.text-field {
    display: inline-block;
    overflow: hidden;
    max-width: 15em;
}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

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