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;