Wie behebe ich MathJax Formatierungsfehler in minimiertem div?

Question

Ich benutze MathJax, um Mathe in einer Webseite anzuzeigen. Ich benutze auch Bootstrap 3. MathJax versucht, die Größe der Mathematik mit der des Textes, wo es platziert ist, zu vergleichen. In den meisten Fällen zeigt sich die Mathematik gut. Wenn jedoch die Mathematik in einem "collapse" div, das heißt

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

es angezeigt wird größer als sein umgebender Text. Der einzige Unterschied zwischen der wie erwartet angezeigten Mathematik und der größer als erwarteten Mathematik ist, dass letztere in einem div mit class = "collapse" liegt.

Ein weiterer wichtiger Teil des Puzzles ist, dass ich die folgende Latex Schriftart verwenden, die in meiner CSS-Datei enthalten ist:

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

I weisen Sie diese Schrift ("Latex") zu meinem Text. Die MathJax-Inkonsistenz tritt auf, wenn ich diese Schriftart verwende und nicht anders.

Die Geige: https://jsfiddle.net/Lyftw08w/1/

Frage: Gibt es eine Möglichkeit, dieses Problem zu beheben, und wenn ja, was ist die Lösung?

Answer 1

Hier ist ein Weg, um dieses Problem zu beheben:

Wenn die ursprünglich zusammenklappbaren Artikel nicht kollabiert beginnen (das heißt Inhalt gezeigt wird), wenn die Seite geladen wird, dann entfernt das Problem geht. Um den Inhalt anzuzeigen, können Sie „in“ in die div-Klasse hinzufügen:

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

Dann, wenn der Mathjax Inhalt geladen wird, können Sie diese div kollabieren durch Entfernen „in“. die folgenden am Ende des Tags Um dies zu tun, fügen die Mathjax konfiguriert:

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

Hier ist die Geige: https://jsfiddle.net/heddtg73/1/