Выравнивание фонового изображения по верху текста в элементе заголовка

Question

У меня проблема с выравниванием изображения по верху текста в элементе

, потому что пространство между верхом текста и верхом поля элементов различно в разных браузерах (до сих пор оно было разным между IE7, Safari 4 и FF3 - больше ничего не тестировали). Особенно заметно, потому что я использую большой шрифт (48 пикселей). Есть ли способ сбросить это, чтобы они все одинаковые? Это не поля / отступы. Кажется, это было бы легко исправить, если бы я просто вынул текст из элемента заголовка и поместил его в div, но на самом деле это элемент заголовка, и я хотел бы по-прежнему использовать его, если в все возможно.

Answer 1

Сброс таблицы стилей был бы очевидным первым шагом (см., Например, «Сброс перезагрузки» Эрика Мейера: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/).

Это существенно переопределяет браузерные значения по умолчанию обратно на 0, поэтому все поля и отступы равны 0px, все шрифты - 1em, высота строки - 1em и т. Д.

Если вы хотите опустить использование таблицы стилей сброса, вы можете просто использовать следующее:

h1,h2 /* etc... */
{padding: 0;
margin: 0;
}

Answer 2

Нет, это невозможно.

Вы можете указать поля, отступы и высоту строки, чтобы максимально приблизить их, но кроме этого вы ничего не можете сделать. Текст всегда будет отображаться по-разному в разных браузерах и в разных системах.

Способ отображения текста зависит от множества факторов, помимо того, как браузер позиционирует его, например, шрифты, установленные в системе, размер шрифта, выбранный пользователем, и параметры сглаживания шрифта. Вы никогда не можете ожидать, что текст будет отображаться в одной и той же позиции пикселя во всех системах.

Answer 3

Ознакомьтесь с сбросом таблиц стилей , которые предназначены для уменьшения несоответствий в разных браузерах, тем самым экономя большую работу в долгосрочной перспективе.См. Также:

• Сброс перезагрузки
• YUI Сброс CSS
• Проект CSS