Как использовать шрифты очень большого размера в Internet Explorer с CSS, которые не повлияют на дизайн?

Question

Размер шрифта, который мне нужен, чтобы соответствовать дизайну, который я имею, составляет 85pt, что является чрезвычайно большим. В IE6 и IE7 мой дизайн подвержен влиянию, потому что элементы div, содержащие эти элементы, становятся больше, чем обычно, и в результате элементы под ними сдвигаются дальше вниз, что несколько нарушает дизайн. У меня есть высота, определенная для этих элементов, и когда я уменьшаю размер шрифта, элементы начинают уменьшаться до правильного размера. Я добавил высоту строки: 0; к элементу, и это работает во всех современных браузерах.

К сожалению, дизайн, над которым я работаю, не может быть показан публично, но я надеялся получить некоторое представление о других возможных методах, с помощью которых я мог бы попытаться заставить дизайн правильно отображаться. Высота родительского элемента составляет 144 пикселя, что включает отступы в 10 пикселей сверху и снизу и верхнюю и нижнюю границу в 1 пиксель.

К сожалению, я могу добавить к этому немного больше, но я включу любую информацию, если смогу.

Answer 1

line-height: 0 - отличное начало. Тем не менее, я немного обеспокоен заполнением 10px родительского элемента. Всякий раз, когда вы смешиваете заполнение с IE, вы начинаете терять контроль над шириной и высотой.

Я бы начал с удаления верхнего отступа на родительском элементе и преобразовал бы его в margin-top: 10px для фактического дочернего элемента. Если это все еще доставляет вам проблемы, удалите поле и попробуйте положение: относительно ребенка с вершиной: 10px.

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

Все это зависит от того, чем на самом деле является ваш дочерний элемент. Если вы преобразуете его во встроенный элемент (например, span, em или strong), это может помочь облегчить некоторые проблемы рендеринга в зависимости от ваших предопределенных стилей.

Еще одна вещь, которую стоит рассмотреть - вы используете поплавки? Иногда вы можете столкнуться с двойной плавающей точкой в ​​IE и float. Быстрый Google для "IE double float" покажет вам, почему.

Это помогает?

Answer 2

Спасибо всем за ваш вклад. Первоначально мне требовалось абсолютное позиционирование по рассматриваемому элементу, в то время как родительский элемент имел относительное позиционирование. Однако использование этого с line-height: 0 привело к исчезновению текста в IE6 и 7; после попытки выяснить, где текст был изначально, я удалил абсолютное позиционирование и решил оставить текст выровненным по левому краю в IE6 и 7, что в результате повлияло на положение других элементов. Я пересмотрел исходное абсолютное позиционирование и добавил границу к элементу, чтобы показать его местоположение. Выполнение этого показало, что это было именно так, как я его определил: элемент с высотой строки 0px, так что верхняя и нижняя границы были рядом друг с другом. Для IE6 и 7 я определил высоту строки: 100%; и мой текст был почти там, где мне было нужно. Я добавил top и необходимые пиксели, и теперь мой элемент находится в правильном положении, высота строки не влияет на другие элементы из-за позиционирования.

Еще раз спасибо всем за помощь.

Answer 3

Преобразование размеров шрифта в пиксели и использование px вместо pt. Убедитесь, что отступы, поля и границы равны 0. Убедитесь, что в вашем HTML нет пробелов, кроме как между словами. Пробельные символы могут отображаться в виде новой строки или пробела, делая элементы больше, чем предполагалось Также не устанавливайте для line-height значение 0, установите для него значение auto или значение шрифта.

Answer 4

Моей первой мыслью при чтении вашего поста было отрегулировать высоту строки, но, поскольку вы уже сделали это, я не уверен, сколько еще можно сделать. Из вашего резюме я понимаю, что дизайн не может быть изменен для учета больших размеров шрифта.

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

Line-height можно оставить равным 0 (или установить для него высоту родительского элемента), но вы, скорее всего, увидите, что текст плавает над другими элементами, если высота текста превышает высоту строки.

Можно ли использовать вместо текста изображение для текста? Это действительно единственный надежный способ заставить все браузеры выглядеть одинаково.