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

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

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

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

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

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

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

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

Любые идеи?

Ответ 1

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

Ответ 2

просто

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

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

Ответ 3

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

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

(приспосабливайтесь)

Ответ 4

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

line-height: 1px;