Конфликт между высотой строки и фактической высотой при использовании курсива

Question

У меня следующая проблема:

У меня есть элемент span с высотой строки 18px и размером шрифта 16px. Это прекрасно работает, когда текст внутри не курсив; пролет остается 18 пикселей в высоту.

Проблема возникает, когда текст в интервале выделен курсивом или жирным шрифтом. По какой-то причине высота элемента span добавляет один пиксель, а я получаю диапазон в 19 пикселей.

Эта проблема только для Firefox. IE, Safari, Opera и Chrome не имеют этой проблемы. Размах остается 18 пикселей в высоту, несмотря ни на что.

Кто-нибудь имел эту проблему раньше?

Это код ошибки:

span
{
  font-size : 18px ;
  line-height : 18px ;
}

span.italicSpan
{
  font-style : italic;
}

Вот пример:

http://edincanada.co.cc/test/shjs-0.6/test7.html

Пожалуйста, проверьте другие браузеры, если хотите. Вы заметите, что элементы span имеют высоту 18 пикселей, так как они должны соответствовать высоте строки: 18px

Answer 1

Вы не можете настроить высоту строки встроенного элемента. Вам нужно выпустить или установить значение display: block или display: inline-block.

Answer 2

Я тоже сталкивался с этой проблемой. Я думаю, что это связано с определенными шрифтами (например, с Sorts Mill Goudy ), и с тем, как их курсивные символы имеют размеры по отношению к их римским буквам. Высота строки зависит от " поля содержимого " встроенных в нее элементов, поэтому больший курсив может мешать вычисленной высоте строки.

Единственное надежное решение, которое я нашел (кроме использования другого шрифта), это играть с курсивом vertical-align. Когда основной текст выровнен по baseline, я обнаружил, что вертикальное выравнивание курсива по top или bottom строки сортирует вещи.

Конечно, теперь ваш курсив слегка смещен относительно основного текста! В конце концов, вам решать, поможет это или нет.

Answer 3

Насколько я могу (просматривая пример страницы в Firefox 8 с установленным Firebug), проблема существует и для первого элемента div.

Причина в том, что по умолчанию элемент div наследует высоту строки от своего родителя, значение которого равно 19px (это зависит от шрифта и браузера). Установка высоты строки для внутреннего элемента просто подразумевает нижний предел фактической высоты строки.

Таким образом, решение состоит в том, чтобы установить высоту строки на включающем элементе уровня блока (или превратить элемент span в отображаемый элемент блока, как предлагается в другом элементе).