Блог

Главная - Вопросы по программированию - Загрузочная группа ввода с Mathjax

Загрузочная группа ввода с Mathjax

#css #html #twitter-bootstrap #mathjax

#css #HTML #twitter-bootstrap #mathjax

Вопрос:

При добавлении формуляра MathJax в группу ввода начальной загрузки v4 элементы не выровнены правильно. Между меткой и вводом есть небольшой шаг.

 <link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<div class="row">
	<div class="col-md-12">
        <p>Without Mathjax everything works fine</p>
		<div class="input-group">
			<span class="input-group-addon">X1</span>
			<input type="number" class="form-control">
		</div>
	</div>
	<div class="col-md-12">
        <p>With Mathjax there is a step at the bottom</p>
		<div class="input-group">
			<span class="input-group-addon">( x_1 )</span>
			<input type="number" class="form-control">
		</div>
	</div>
</div>

Редактировать: Эта проблема возникает с Chrome и уровнем масштабирования 90% и 125% или выше.

Скриншот проблемы с Chrome

Комментарии:

1. Я не уверен, что понимаю вашу жалобу. Вы имеете в виду, что 1 меньше, чем x ? Обратите внимание, что это правильный результат, поскольку x_1 означает x с индексом 1, а индексы расположены ниже базовой линии. Если это не то, что вы имеете в виду, вам нужно будет более четко указать, в чем проблема.

2. Ах, я только что заметил, что эта проблема возникает с Firefox, но не с edge. Я могу протестировать больше браузера позже. Проблема в том, что высота поля ввода немного меньше диапазона.

3. Хорошо, спасибо за дополнительную информацию. Это не встречается у меня в Safari или Firefox на Mac OS X, поэтому я этого не видел.

4. Возможно, это связано со временем запуска MathJax по отношению к коду, который обрабатывает группу ввода. Если группа ввода создается до запуска MathJax, высота будет соответствовать высоте исходного ввода, а не набранной математике, и когда MathJax позже наберет метку, она станет выше, оставляя область ввода слишком маленькой.

5. MathJax использует размеры, заданные в терминах шрифта — относительные em , а не абсолютные px . Когда браузер преобразует их в пиксели, это означает, что они должны быть округлены, и это округление является источником различий такого типа. MathJax пытается округлить свои em до пикселей, но его определение отношения пикселей к em является эмпирическим и не идеальным. Когда действует масштабирование, это усугубляется, потому что px масштабируется так, что больше не соответствует фактическим пикселям на экране. Это означает, что браузер выполняет дополнительный уровень округления. …