Я набрал код 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>
Как это исправить?
Скрипка здесь.
MathJax генерирует разную HTML и CSS разметку для двух формул. Первый имеет font-size: 126%
а второй font-size: 130%
.
Проблема заключается в выходном процессоре HTML-CSS, в частности, в опции matchFontHeight
. Если установлено значение false, обе формулы имеют одинаковый font-size
. См. Http://jsfiddle.net/C6tyz/3/.
Интересно то, что формулам присваивается разный font-size
только тогда, когда сначала отображается первый, а второй скрыт. Я предполагаю, что MathJax генерирует вторую, прежде чем она будет отображаться в первый раз, и поэтому рассчитанный font-size
зависит от первой формулы, которая уже отображается.
Никакой обходной путь, оставляющий matchFontHeight: true
приходит мне на ум.
display:none
CSS, как описано в моем ответе.
matchFontHeight
опция matchFontHeight
и предположил, что в вычислении может быть ошибка. Теперь я знаю, что проблема заключается в необходимости использовать запасной вариант. Ваш ответ определенно намного лучше моего +1. Спасибо за объяснение!
Проблема здесь в том, что display: none
для элемента exx1
. Элементы, которые display: none
не выложен браузером, и их размеры (например, (offsetHeight
и offsetWidth
) недоступны, поэтому MathJax не может определить размер окружающего шрифта или измерить любой из элементов, которые это необходимо для того, чтобы набирать математику. Чтобы обрабатывать математику, которая находится в контейнере, который display: none
, он временно набирает его в <body>
а затем перемещает результат в исходное местоположение. Это означает, что шрифт сопоставление выполняется с основным шрифтом корпуса, а не с шрифтом в этом месте. Вероятно, это источник проблемы. Разница между браузерами, возможно, связана с различием шрифтов по умолчанию, используемых для элемента body.
Я рекомендую вам не использовать display: none
если содержание содержит математику. Существует несколько других методов, которые можно использовать для получения аналогичных результатов, в основном с использованием visibility: hidden
и установление высоты до 0. См. Примеры из моего разговора на JMM в январе 2013 года (в частности, на display:none
).