Обнуление стилей

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

Итак, обнуления.
Проблема заключается в том, что все браузеры имеют те или иные дефолтные значения (значения, используемые по-умолчанию) для отображения HTML-элементов и при том не для всех браузеров эти значения одинаковы. Например отступы списков (<ul>) в одних браузерах реализованы с использованием margin, а в других с помощью padding. Также частенько доставляют неудобства различные отступы параграфов (<p>), различие наличия/отсутствия дефолтных границ у некоторых элементов, ну и конечно же совершенно разные стили заголовков (<h1>-<h6>).

Самый простой способ быстро избавиться от проблем с отступами: * {margin:0; padding:0;} который обнуляет отступы сразу всех(!) элементов. Однако, может потребоваться точечный подход к элементам. Тогда используем следующую структуру:

html, body, h1, h2, h3, h4, h5, h6, p, em, strong, abbr, acronym, blockquote, q, cite, ins, del, dfn, a, div, span, pre, hr, address, br, b, i, sub, sup, big, small, tt, table, tr, td, caption, thead, tbody, tfoot, col, colgroup, form, input, label, textarea, button, fieldset, legend, select, option, optiongroup, ul, ol, li, dl, dt, dd, code, var, kdb, samp, img, object, param, map, area, bdo, iframe {padding:0; margin:0;}

Как видите, мы перечисляем все необходимые элементы. Таким образом мы всегда можем отменить обнуление для конкретного элемента.

Следующим ходом будет точечная отмена границ:

img, fieldset {border:0;}

Мы отдельно обнулили границы у картинок (<img>), т.к. неприятные границы возникают, когда картинка является ссылкой.
У <fieldset> границы могут где-то быть, а где-то не быть по-умолчанию, потому явно определяем и его.

Следующая проблема – различие размеров шрифтов.

Тут для начала неплохо было бы Вам просветиться по вопросу, как лучше указывать размеры шрифтов на странице ( px, em, % ). Что касается конкретно меня, то, после долгого использования em, я пришел к выводу, что предпочтительнее использовать px. Пишем примерно следующее правило:

body {font:12px/1.4em Arial, Verdana, Tahoma, sans-serif;}

Если же вы предпочитаете использование em, то для задания единообразия по всем браузерам пишем правило:

body {font:62.5%/1.6em Arial, Verdana, Tahoma, sans-serif;}

Больше всего нас интересует число 62.5%. Оно превращает дефолтные шрифты в равные 10px. В дальнейшем можно будет задавать размер шрифта относительно этих 10px, т.е. 1.5em = 15px (т.е. имеется ввиду, что 1em это 100% текущего размера).

Также советую сразу задать размеры для H1-H6 (хотя обычно используются только H1-H3). Примерно так:

h1 {font-size:20px;}
h2 {font-size:15px;}
h3 {font-size:12px;}

Для списков не рекомендую прописывать list-style:none; для всех <li>, т.к. это сильно затруднит использовании обычных списков на страницах. Представьте, человек наполняет страницу через «визивик», делает маркерованный список, а он на странице отображается без маркеров. Неприятно. Вы можете сделать особый класс для таких списков, тогда программистам придется поизвращаться, чтобы он навешивался именно туда, куда надо. Проще прописать нормальный вид спискам по умолчанию и отменять маркеры и отступы в тех структурах, где вам это необходимо:

li {margin-left:25px;}

Этого достаточно, чтобы маркеры (нумерованные и ненумерованные) отображались примерно одинаково во всех браузерах.

Можно добавить кое-что и для форм:

input, label, select {vertical-align:middle;}
textarea {vertical-align:top;}

Итого, получаем:

* {margin:0; padding:0;}
img, fieldset {border:0;}
body {font:12px/1.4em Arial, Verdana, Tahoma, sans-serif;}
h1 {font-size:20px;}
h2 {font-size:15px;}
h3 {font-size:12px;}
input, label, select {vertical-align:middle;}
textarea {vertical-align:top;}

Вот и всё. На самом деле, больше ничего и не надо. Остальные дополнения делаются точечно и по необходимости.

Существуют еще и другие дефолтные значения, которые могут доставить неудобства.. Потому можете даже воспользоваться расширенными обнулениями (посмотрите вот эту статья, к примеру). Но я такими не пользуюсь.