I've typed my LaTex code in spoiler, but the size is difference. Although their font-size are same but it's bigger than normal context. Here is an example.
<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>
How do I fix this?
The fiddle is here.
MathJax generates different HTML & CSS markup for the two formulas. The first one has font-size: 126% while the second one has font-size: 130%.
The problem is in the HTML-CSS output processor, specifically in its matchFontHeight option. When set to false, both formulas have the same font-size. See http://jsfiddle.net/C6tyz/3/.
The interesting thing is that the formulas are assigned different font-size only when initially the first one is shown and the second one is hidden. I assume that MathJax generates the second one just before it is displayed for the first time and therefore the calculated font-size is influenced by the first formula, which is already displayed.
No workaround leaving matchFontHeight: true comes to my mind.