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

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

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

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

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

Answer 3

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

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

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