如何修复折叠 div 中的 MathJax 格式错误？答案

【问题标题】：How do I fix MathJax formatting error in collapsed div?如何修复折叠 div 中的 MathJax 格式错误？
【发布时间】：2017-07-01 19:55:05
【问题描述】：

我正在使用 MathJax 在网页中显示数学。我也在使用 Bootstrap 3。MathJax 尝试将数学的大小与放置它的文本的大小相匹配。在大多数情况下，数学显示得很好。但是，当数学在“collapse”div 中时，即

<div class="collapse">
   <!-- Math here -->
</div>

它比周围的文本显示更大。按预期显示的数学与显示的比预期大的数学之间的唯一区别是后者位于 class="collapse" 的 div 中。

另一个重要的难题是我使用了以下 Latex 字体，它包含在我的 css 文件中：

@font-face {
    font-family: "latex";
    src: url(data:font/truetype;charset=utf-8;base64,T1R...gP5w/kP+RAA format("opentype");
}

我将此字体（“latex”）分配给我的文本。当我使用此字体时会出现 MathJax 不一致，否则不会。

问题：有没有办法解决这个问题，如果有，解决办法是什么？

【问题讨论】：

【解决方案1】：

以下是解决此问题的方法：

如果最初可折叠的项目在页面加载时开始未折叠（即显示内容），那么问题就会消失。要显示内容，可以在 div 类中添加“in”：

<div class="collapse in">
    <!-- Math here -->
</div>

然后，一旦加载了 MathJax 内容，您可以通过删除“in”来折叠此 div。为此，请在配置 MathJax 的标记末尾添加以下内容：

MathJax.Hub.Queue(function () {
    $(".collapse").removeClass("in");
});

【讨论】：