Кросс-браузерный CSS

Сколько ни разрабатывали стандарты, сколько ни напрягался небезызвестный консорциум 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. Не используйте любые единицы измерения, кроме пикселей (px);
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
}