Ответ 1
К сожалению, re: рендеринг области содержимого на основе шрифта CSS2.1 вообще не говорит:
Высота области содержимого должна основываться на шрифте, но в этой спецификации не указывается, как это сделать. UA может, например, использовать em-box или максимальный зажим и descender шрифта. (Последнее гарантировало бы, что глифы с частями выше или ниже em-box все еще попадают в область содержимого, но приводят к коробкам разного размера для разных шрифтов, а первый гарантирует, что авторы могут контролировать стиль фона по отношению к "линии-высоте", но приводит к картине глифов вне их области содержимого.)
Другими словами, верстка и то, как точно рисовать и размещать область содержимого в строке строки, остается до собственной реализации браузера, по крайней мере, в CSS2.1. Однако это может быть лучше определено в будущей спецификации (вероятно, Fonts module, если не отдельный модуль 1).
В разделе 10.8.1 содержатся некоторые сведения о том, как свойство line-height
влияет на рендеринг области содержимого вокруг текста, который втекает в линию, но опять же это зависит от высоты самой области содержимого, которая, как указано выше, составляет undefined в CSS2.1.
Обратите внимание, что auto
не является допустимым значением для line-height
; вы, вероятно, хотели использовать normal
, что, кстати, также является его начальным значением (но не обязательно значением браузера по умолчанию). Кроме того, это то, что спецификация говорит о значении normal
:
нормальный
Сообщает агентам пользователя, чтобы установить используемое значение в "разумное" значение, основанное на шрифте элемента. Значение имеет то же значение, что и. Мы рекомендуем использовать значение "normal" между 1.0 и 1.2. Вычисленное значение является "нормальным".
Как вы можете видеть, не так много, даже в отношении сравнения line-height: normal
и line-height: 1
(или 1em
или 100%
), потому что то, что составляет "нормальную" высоту линии, браузер также решит. Тем не менее, похоже, что Chrome и Firefox хорошо выполняют глифы в разумных пределах, когда их просят использовать обычную высоту линии.
Кстати, Chrome не обрезает descenders. Он отображает их вне поля содержимого, но никогда не должен привязывать их к границам поля, если вы не установите overflow: hidden
.
1 Определение свойства line-height
CSS3 в настоящее время находится в этом модуле, но это сразу же очевидно, что он давно заброшен или, по крайней мере, ожидает перезаписи. Модуль в его текущем состоянии чрезвычайно подробный, но достаточно сказать, что он в значительной степени игнорировался как продавцами браузеров, так и рабочей группой.