Question

<style>
       .s1{font-size:12px}
</style>

<div class="s1">
        $\dfrac{1}{2}$
</div>

上面的代码工作正常，mathjax（2.6版）渲染它   正确。数学按预期缩小。

假设上面的div加载了样式“display：none”和数学   通过将显示更改为阻止来单击链接时显示。

在这种情况下，数学不会按比例缩小。

我可以看到许多人面临同样的问题。这个github页面详细解释了这个问题。出现此问题的原因是，如果样式为“display：none”，则浏览器不会计算子元素的大小。因此，mathjax以单独的隐藏元素处理它。

建议的解决方案是使用“position：absolute; top：0，left：0; width：0，height：0，overflow：hidden; visibility：hidden;”

另一种方法是在这样的div中重新处理数学

但是，有没有更好的方法来解决这个问题，可能迫使浏览器计算display：none元素或任何其他方法的大小？