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片段是运行

  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 加载然后开始获取元素的大小。当尺寸停止变化时... return 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>

div 中的 MathJax 高度不正确

MathJax in div incorrect height

html

javascript

css

height

mathjax