FireFox 3 line-height

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

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

Вычисленное значение 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 пикселей.

Вы ничего не можете сделать. У каждого браузера есть способ рендеринга CSS и контента. Вы можете использовать «Главный» сброс (как предлагает cowgod), но даже в этом случае это не решит в конечном итоге проблемы с выравниванием. Они там из-за реального движка рендеринга. Добавьте CSS на свой существующий веб-сайт и протестируйте его. Скажите, делает ли это идеальным пиксель во всех отношениях. Не будет.

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

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

Вы МОЖЕТЕ решить это:

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

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