FireFox 3 line-height

Question

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

Answer 1

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

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

body {line-height: 1.2;}

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

Трудно (невозможно?) Получить "идеальные по пикселям" результаты, но для получения максимально предсказуемых результатов я стараюсь использовать высоту строки, которая дает хорошее круглое значение при умножении на font- размер. Мы не можем знать размер шрифта по умолчанию для пользовательского агента, но 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 и контента. Вы можете использовать сброс «Master» (как предлагает cowgod), но даже тогда это не в конечном итоге решит проблемы с выравниванием. Они там из-за фактического движка рендеринга. Подключите CSS к вашему существующему веб-сайту и протестируйте его. Скажите, если это делает пиксель идеальным по всем направлениям. Не будет.

Единственный способ на самом деле достичь совершенства пикселей - это реализовать определенный CSS для определенных браузеров. У Mozilla есть @ - moz-doc , 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 также есть один.