Разница высот div с `position: относительным;` и меньшим шрифтом

0

Я задал этот вопрос о подтеке:

Использование тега <sub> и сохранение высоты строки

Итак, теперь я использую position: relative; и меньший шрифт для "подражания" поведения индекса. Но я обнаружил, что это решение не является идеальным пикселем. <div> с этим эмулированным субтеком может иметь большую высоту, а затем <div> без этих эмулируемых подтеков, даже если тексты в каждой строке строк <div> точно совпадают. Я наблюдал это поведение в Chrome и Firefox, вот проблема, показанная на живом коде:

http://jsfiddle.net/FRkQ6/

В моем браузере Chrome в Mac вывод:

Height of first div is: 163
Height of first div is: 162

Этот живой код работает на chrome на Mac, где оба div имеют одинаковые строки с одним и тем же текстом. В Firefox эта демонстрация не работает, потому что тексты в строках по-разному отображаются. Но проблема похожа на Chrome.

Может ли кто-нибудь объяснить мне такое поведение? Это некоторая ошибка в браузерах или предполагаемое поведение? Могу ли я исправить это каким-то образом с помощью CSS (если я вычитаю высоту верхней и нижней границы, то есть 2, высота должна быть делимой по высоте линии, что составляет 20 в моей демонстрации, поэтому я никогда не должен получать высоту 163)?

Теги:
google-chrome
firefox

1 ответ

1
Лучший ответ

Несмотря на то, что диапазон является позицией: относительно браузера все еще (ошибочно), учитывая его высоту линии. Добавление высоты строки нуля фиксирует ее...

line-height: 0;

jsFiddle demo

Ещё вопросы

Сообщество Overcoder
Наверх
Меню