Задача:
- Одинаковое отображение тега hr в браузерах Internet Explorer 6 и 7, Opera, Mozilla Firefox и Google Chrome.

В этой статье я расскажу об универсальном решении данной ситуации. К сожалению из-за так любимого нами Internet Explorer решить задачу без хаков — невозможно, правда никто ведь не отменял Conditional Comments.

Для начала я опишу суть проблемы
- Каждый из рассмотренных браузеров применяет различные отступы для этого элемента.
- Браузеры семейства Internet Explorer применяют также свои, внутренние отступы, не отключаемые даже при margin:0 и padding:0.
- Браузеры семейства Internet Explorer для определения цвета элемента используют color, в то время как остальные используют свойство background.

Решение проблемы

1. Убираем отступ снизу в Internet Explorer при помощи кода:
display: block;

2. Убираем границы по умолчанию и выставляем одинаковую высоту:
height: 1px;
border: 0;

3. Выставляем цвет для всех браузеров (вы выставляете свой, в примере выставлен стандартный синий):
color: blue; /* Internet Explorer */
background: blue; /* Остальные браузеры */

4. Теперь самое сложное - нужно уровнять отображение элемента в Internet Explorer. Для любителей чистоты и порядка - рекомендую выделить этот код в отдельный CSS файл и отдавать его только пользователям Internet Explorer при помощи условных комментариев (Conditional Comments):
*margin: -7px 0 -7px;

Данный код успешно прошел тестирование во всех рассмотренных браузерах.