Я задал этот вопрос о подтеке:
Использование тега <sub> и сохранение высоты строки
Итак, теперь я использую position: relative;
и меньший шрифт для "подражания" поведения индекса. Но я обнаружил, что это решение не является идеальным пикселем. <div>
с этим эмулированным субтеком может иметь большую высоту, а затем <div>
без этих эмулируемых подтеков, даже если тексты в каждой строке строк <div>
точно совпадают. Я наблюдал это поведение в Chrome и Firefox, вот проблема, показанная на живом коде:
В моем браузере Chrome в Mac вывод:
Height of first div is: 163
Height of first div is: 162
Этот живой код работает на chrome на Mac, где оба div имеют одинаковые строки с одним и тем же текстом. В Firefox эта демонстрация не работает, потому что тексты в строках по-разному отображаются. Но проблема похожа на Chrome.
Может ли кто-нибудь объяснить мне такое поведение? Это некоторая ошибка в браузерах или предполагаемое поведение? Могу ли я исправить это каким-то образом с помощью CSS (если я вычитаю высоту верхней и нижней границы, то есть 2, высота должна быть делимой по высоте линии, что составляет 20 в моей демонстрации, поэтому я никогда не должен получать высоту 163)?
Несмотря на то, что диапазон является позицией: относительно браузера все еще (ошибочно), учитывая его высоту линии. Добавление высоты строки нуля фиксирует ее...
line-height: 0;