Question

我在剧透中键入了我的LaTex代码，但大小不同。虽然他们的font-size相同，但它比正常情境更大。这是一个例子。

<span style="font-size: 11pt;">$\alpha\beta\gamma\delta$</span>
<a id="ex1" onclick="document.getElementById('exx1').style.display=''; document.getElementById('ex1').style.display='none';" class="link">[Show]</a>
<span id="exx1" style="display: none">
<a onclick="document.getElementById('exx1').style.display='none'; document.getElementById('ex1').style.display='';" class="link">[Hide]</a><br>
<span style="font-size: 11pt;">$\alpha\beta\gamma\delta$</span>
</span>

我该如何解决这个问题？

小提琴是here。

Answer 1

此处的问题是display: none元素的exx1设置。 display: none的元素不是由浏览器布局的，它们的大小（如（offsetHeight和offsetWidth）不可用，因此MathJax无法确定其大小周围的字体，或者为了排序数学而测量它需要的任何元素。为了处理容器display: none中的数学，它会暂时在<body>中对它进行排版。然后将结果移动到原始位置。这意味着字体匹配是对主体字体进行的，而不是该位置的字体。这可能是问题的根源。浏览器之间的区别可能与用于body元素的默认字体的差异。

如果内容包含数学，我建议您不要使用display: none。可以使用其他几种技术来获得类似的结果，主要涉及使用visibility: hidden并将高度设置为0.请参阅2013年1月JMM（特别是一篇）中的examples在display:none）。

Answer 2

MathJax生成不同的HTML＆amp;两个公式的CSS标记。第一个有font-size: 126%，第二个有font-size: 130%。

问题出在HTML-CSS output processor，特别是matchFontHeight选项。设置为false时，两个公式都具有相同的font-size。请参阅http://jsfiddle.net/C6tyz/3/。

有趣的是，只有在最初显示第一个并隐藏第二个公式时，才会为公式指定不同的font-size。我假设MathJax在第一次显示之前生成第二个，因此计算的font-size受第一个公式的影响，该公式已经显示。

没有解决方法离开matchFontHeight: true。

HTML剧集中的LaTex大小更大

2 个答案: