FireFox 3 высота строки

Question

Firefox 3 представил новое поведение, при котором высота строки, когда она не задана, отличается от того, как ее отображают другие браузеры.Таким образом, критический раздел, возможно, отображается слишком высоко в этом браузере.Установка глобального процента не работает, поскольку его основа отличается.Установка безразмерного значения, такого как "1", также не работает.Есть ли какой-то способ нормализовать это измерение?

Answer 1

Вычисленное значение line-height: normal варьируется в зависимости от платформ, браузеров (и разных версий одного и того же браузера, как вы указываете), шрифтов и даже разных размеров одного и того же шрифта (смотрите статью Эрика Мейера).

Установка безразмерного значения, такого как...

body {line-height: 1.2;}

...следует работайте над нормализацией интервалов между браузерами.Если это не работает, не могли бы вы предоставить более подробное описание вашей таблицы стилей?

Трудно (невозможно?) Получить результаты "идеально в пикселях", но для того, чтобы получить результаты, которые были бы максимально предсказуемыми, я стараюсь использовать высоту строки, которая дает хорошее круглое значение при умножении на размер шрифта.Мы не можем знать размер шрифта пользовательского агента по умолчанию, но 16 пикселей - это довольно распространенное явление.

body 
{
    font-size: 100%;
    line-height: 1.5;
}

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

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

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

Начиная с базового размера шрифта в 16 пикселей, высота строки будет составлять 24 пикселя.В пределах <p> элемент размер шрифта становится 12 пикселями, но высота строки увеличивается не станет 18 пикселей, скорее, останется 24 пикселя.В этом разница между line-height: 1.5 и line-height: 150%.Когда body {line-height: 1.5;} используется, высота линии для <p> является 18 пикселей.

Answer 2

Вы абсолютно ничего не можете сделать.У каждого браузера есть свой способ рендеринга CSS и контента.Вы можете использовать "Основной" сброс (как предлагает cowgod), но даже тогда это в конечном счете не исправит проблемы с выравниванием.Они существуют из-за реального движка рендеринга.Примените CSS к вашему существующему веб-сайту и протестируйте его.Скажите мне, делает ли это pixel совершенным по всем направлениям.Этого не произойдет.

Единственный способ действительно добиться совершенства пикселей - это реализовать определенный CSS для конкретных браузеров.Mozilla имеет @-моз-док, У IE есть свои собственные хаки, но ни один из них не является частью спецификаций W3C, и мы все знаем, что стандарты важны.Так что не такой уж большой вариант.

Как сказал Дэвид выше, это трудно.На самом деле я склонен думать, что это невозможно.И я потратил часы на попытки, поверь мне!Я чуть не сошел с ума больше раз, чем могу сосчитать.Это тяжелая пилюля, которую трудно проглотить, но обойти ее просто невозможно, если только все не будут использовать один и тот же движок просмотра (что, на мой взгляд, действительно сделало бы интернет большим скачком вперед).Я имею в виду, что было бы не так сложно установить в свой браузер любой интерфейс, который вы хотите, при условии, что вы подключаете [gecko] [webkit] [presto] [trident] [что угодно] для работы с серверной частью...Поскольку все хорошие проекты имеют открытый исходный код, вы могли бы объединить проекты и действительно приступить к работе.Людям нужно научиться хорошо вести себя вместе ;)

Answer 3

Вы МОЖЕТЕ решить эту проблему:

Установите высоту строки равной 1, затем обнулите текст, используя padding-top и padding-bottom, и установите высоту на auto.

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
} 

Answer 4

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

Мне нравится Сброс CSS Эрика Мейера. Yahoo у него тоже есть такой.