Firefox не соответствует высоте строки

Question

Проблема может появиться и в других браузерах, я еще не проверял.

Извините, но это займет некоторое количество работы с вашей стороны. Пожалуйста, несите меня.

• Открыть Firefox. Вам нужно расширение Firebug или что-то, что позволит вам запустить одну команду JS.

• Go here. Извините за все аниме.

• Откройте консоль Firebug и выполните следующую команду:

CSSdev.enable_tiles()

• Вы сейчас, глядя на базовой сетке. Каждый квадрат равен 24x24 пикселям. Высота линии по всему сайту составляет 24 пикселя, без исключений. Изображения, поля, размер всего кратного 24px.

• Прокрутить вниз до покажет "Fluffy tag cloud" в боковой панели. Обратите внимание, что что-то под ним неуместно; это слишком низко. Если вы перейдете в дерево DOM Firebug к этой части макета и наведите курсор мыши на элемент <p>, вы увидите, что высота облака тега немного велика.

---

Чтобы быть более ясно: проблема заключается в том, что высота < р > элемента, который оборачивает весь каталог Пролет < > элементы облака тегов не кратно 24px; действительно, это всего лишь несколько пикселей, слишком больших.

Это странно, потому что <p> содержит только текст, а его высота строки равна 24px, поэтому его высота должна быть 24px, умноженная на количество строк текста внутри него, независимо от размера шрифта чего-либо внутри. Так я все равно понимаю.

---

Учитывая, что:

• Облако тегов имеет наследовать высоту строки: 24px правил;
• Размер шрифта любого диапазона внутри облака составляет 20 пикселей или меньше;
• Единственный способ решить эту проблему кажется быть, чтобы дать все пролеты тот же размер шрифта (например, давая все, что 16px размер шрифта собрания трудов)

Есть ли какое-либо исправление или fugly hack Я могу использовать разные размеры шрифта и линией высотой 24px?

---

Я не знаю, почему Коби удалил его ответ, но это фактически привело к исправлению моей проблемы.Решение состоит в том, чтобы преобразовать его в список, UL и LI внутри него, поплавать LI слева и установить для них высоту 24px и небольшую разницу, чтобы держать их друг от друга горизонтально.

@Kobi: пожалуйста, повторно добавить свой ответ, так что я могу принять его

---

Поскольку я теперь исправил проблему, шаги, описанные выше, больше не будет работать.

Answer 1

Это странно, и я не проверял в это, но это выглядит как установка этого делает трюк:

.rank-1 { 
    line-height: 1; 
} 

Опять же, я просто играл, но мне кажется, чтобы выровнять страницу как вы хотите.

Другой вариант - иметь теги float:left и иметь фиксированную высоту 24px.