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

添加溢出:隐藏; 风格也应该修复它.