Сколько не разрабатывали стандарты, сколько не напрягался небезызвестный консорциум W3, сколько не ругали разработчиков софта недовольные разработчики сайтов - все равно поддержка CSS в браузерах реализована криво и не полностью (за исключением MSIE 5.5 под Macintosh и Netscape 6.0). Начиная с третьих версий массовых браузеров у веб-мастеров прибавилось головной боли. И эта боль вызвана разной реализацией CSS у разных браузеров. Более того, эта реализация в Netscape 4.x настолько корявая, что список багов занимает 4 страницы мелким шрифтом без подробного описания.

Что же делать бедным веб-мастерам? Вариантов несколько:

1. Забыть про CSS и вообще его не использовать (совершенно непривлекательный вариант, потому как CSS на самом деле вещь полезная во многих отношениях и отказываться от полезного инструмента глупо);
2. Свести использование CSS к минимуму, чтобы быть на 100% уверенным в одинаковости (более-менее приемлемое решение, но сгодится только как временное, потому что через годик-другой без CSS не обойдется ни один приличный сайт, а табличная верстка уйдет в небытие);
3. Разобраться в CSS и ограничить себя применимостью одной таблицы стилей ко всем браузерам (это один из хороших вариантов, но весьма ограничивает возможности использования всех богатств и достоинств CSS);
4. Детально разобраться в CSS и писать таблицу стилей, но используя фишки, скрывающие фрагменты кода от некоторых браузеров, добиваясь максимальной эффективности от каждого конкретного браузера (хорошее решение, применимо во многих случаях);
5. Детально разобраться в CSS и писать разные таблицы стилей для разных браузеров (тоже хорошее решение).

Последние три пункта (в особенности 4-ый и 5-ый) собственно и относятся к кросс-браузерному CSS. Вот и остановимся на них поподробнее и начнем с самого легкого.

Одна таблица стилей для всех браузеров.

Это простейший метод добиться того, чтобы ваша страничка выглядела одинаково во всех браузерах. Но этот метод весьма ограничивает возможности использования всех богатств и достоинств CSS. Например, вы лишитесь возможности использовать line-height или margin-top, потому что некоторые браузеры некорректно работают с этими элементами.

Список всех багов слишком обширен, поэтому ограничимся наиболее явными и опасными:

1. Не используйте margin-top
2. Не используйте любые единицы измерения, кроме пикселей
3. Не прописывайте высоту линии (line-height)
4. Не используйте ключевое слово normal (оно все равно не нужно)
5. Не используйте числовые значения для font weights в сокращенной записи стилей для шрифта.
6. Устанавливйте margin-left и margin-right только для BODY.
7. Не используйте стили для LI, DD и DT.

В дополнение ко всему, если вы используете таблицы, надо разделить селекторы для BODY на две части: одни для наследующихся, другие для не наследующихся. Например:

BODY {font-family: sans-serif;
color: red;
background: white;
margin-left: 7%; 
margin-right: 5%; 
margin-bottom: 2em} 

Заменяется на

BODY {font-family: sans-serif;
color: red}

BODY {background: white;
margin-left: 7%; 
margin-right: 5%; 
margin-bottom: 2em} 

Затем для каждого блокового элемента, кроме LI, DD и DT, плюс SPAN прописать наследующиеся свойства. Например:

Это надо сделать из-за IE 3 и Netscape 4, так как когда они обрабатывают страницу и встречают таблицу, то частенько убивают наследование от тэга BODY для тэга TABLE и всего последующего контента.

Это довольно краткая инструкция, но она поможет написать рабочую каскадную таблицу стилей, которую будут обрабатывать одинаково практически все браузеры, поддерживающие CSS.

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