HTML/CSS：一个元素，1 像素高，100% 宽，0 张图片，单色，所有浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1261335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: One element, 1 pixel high, 100% wide, 0 images, single color, all browsers
提问by Deniz Dogan
I'm looking for a way to do something which in my opinion shouldbe super simple, but I couldn't figure it out...
我正在寻找一种方法来做我认为应该非常简单的事情，但我无法弄清楚......
I want a graphical element on my web page which is exactly1 pixel high, 100% wide and has a certain color, let's say red. It should look exactly the same in all browser and should preferably not break the semantics too much.
我想在我的网页上有一个图形元素，它正好是1 像素高、100% 宽并且有某种颜色，比如说红色。它应该在所有浏览器中看起来完全相同，并且最好不要过多破坏语义。
I don't want to use any images for this and I don't want to use more than one HTML element. Of course, I will not use JavaScript.
我不想为此使用任何图像，也不想使用多个 HTML 元素。当然，我不会使用 JavaScript。
I tried the old classic which probably many of you know:
我尝试了可能很多人都知道的古老经典：
<div class="hr"></div>
<style ...>
.hr {
height: 1px;
background: red;
width: 100%;
font-size: 1px; /* IE 6 */
}
</style>
The problem with the above solution is that IE6 will render this as two or three pixels high, to fit the non-existing contents of the div.
上述解决方案的问题是 IE6 会将其呈现为两到三个像素高，以适应div.
Any ideas?
有任何想法吗？
采纳答案by Meep3D
adding an overflow: hidden; style should fix it also.
添加溢出：隐藏；风格也应该解决它。
回答by Robert Greiner
just do
做就是了
.hr {
height: 0px;
margin: 0px;
border-bottom: 1px solid #FF0000;
font-size: 1px;
}
I went through the same thing when I was new to CSS.
我刚接触 CSS 时也经历过同样的事情。
回答by Anentropic
I don't have IE6 handy to test, but an actual HR tag can work in modern browsers. Took me a couple of tries to realise you set the background color not the border color:
我没有方便测试的 IE6，但实际的 HR 标签可以在现代浏览器中工作。我尝试了几次才意识到您设置的是背景颜色而不是边框颜色：
hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }
(adjust to suit)
（调整以适应）
回答by Ivan Zlatanov
I don't have IE6 to test this, but I remember it had to do something with the line height. Have you tried this?
我没有 IE6 来测试这个，但我记得它必须对行高做一些事情。你试过这个吗？
line-height: 1px;
