HTML / CSS: один элемент, высота 1 пиксель, ширина 100%, 0 изображений, один цвет, все браузеры

Question

Я ищу способ сделать что-то, что, на мой взгляд, должно быть очень простым, но я не мог понять это ...

Мне нужен графический элемент на моей веб-странице, который имеет в точности 1 пиксель в высоту, 100% в ширину и имеет определенный цвет, скажем, красный. Он должен выглядеть одинаково во всех браузерах и желательно не слишком сильно нарушать семантику.

Я не хочу использовать для этого изображения, и я не хочу использовать более одного HTML-элемента. Конечно, я не буду использовать JavaScript.

Я попробовал старую классику, которую, вероятно, многие из вас знают:

<div class="hr"></div>

<style ...>
.hr {
    height: 1px;
    background: red;
    width: 100%;
    font-size: 1px; /* IE 6 */
}
</style>

Проблема с вышеприведенным решением состоит в том, что IE6 отобразит его как два или три пикселя в высоту, чтобы соответствовать несуществующему содержимому div.

Есть идеи?

Answer 1

просто сделай

.hr {
  height: 0px;
  margin: 0px;
  border-bottom: 1px solid #FF0000;
  font-size: 1px;
}

Я прошел через то же самое, когда был новичком в CSS.

Answer 2

добавление переполнения: скрыто; стиль должен это исправить.

Answer 3

У меня нет IE6, удобного для тестирования, но реальная метка HR может работать в современных браузерах. Мне понадобилось пару попыток, чтобы понять, что вы устанавливаете цвет фона, а не цвет границы:

hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }

(настроить под костюм)

Answer 4

У меня нет IE6 для проверки этого, но я помню, что он должен был что-то делать с высотой строки. Вы пробовали это?

line-height: 1px;