Как писать кросс-браузерный код

После того, как вылизана последняя строчка функционального кода проекта, начинается дизайн. Точнее, начинаются танцы с бубном - ибо этот самый дизайн он многолик и непредсказуемо изменчив, если рассматривать его через разные браузеры. Достижение кросс-браузерности - очень трудоемкая и тяжелая в плане крепости психики работа, этой теме посвящены сотни статей, написаны сотни хаков для стилевых таблиц, но из этой троицы - семейства Mozilla, Opera и Internet Explorer хоть один, да доставит несколько неприятных часов при отладке сверстанного и утвержденного макета дизйна. «И в Safari чтобы проверили ...» добавляет свои пять копеек арт-директор. Ага, щаз, только сначала застрелюсь.

Тем не менее есть способ сэкономить огромное количество впустую потраченного времени, чур не плеваться: писать код правильно! Далее - краткий итог статьи How to get Cross Browser Compatibility Every Time - 10 правил кроссбраузерной верстки:

1. При верстке используем strict doctype и standards-compliant HTML/CSS
2. Начиная писать css-правила, обнуляйте дефолтные значения (приём, известный как reset)
3. Используйте -moz-opacity:0.99 в текстовых элементах для Firefox, и text-shadow: #000 0 0 0 в Safari
4. Никогда не переопределяйте размер изображений средствами CSS или HTML, используйте подготовленные картинки с нужными размерами
5. Сразу проверяйте, как отображаются выбранные шрифты во всех браузерах. Не используйте Lucida
6. Указывайте размер шрифтов, используя % и em
7. Все плавающие слои должны иметь указания display:inline и overflow:hidden
8. К статичным блокам долно быть применено overflow:auto и использован триггер hasLayout (что это такое - на хабре)
9. Не используйте новые селекторы из спецификации CSS3
10. Не используйте прозрачные PNG без специального фильтра для альфа прозрачности (.htc или IE7 например)