使用 HTML/CSS 的水平线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7302997/
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
Horizontal line using HTML/CSS
提问by AJW
I am trying to get a horizontal line to work in my blog site, but I am having trouble in displaying the line in google chrome (IE and Firefox display it perfectly).
我试图让一条水平线在我的博客站点中工作，但我在 google chrome 中显示该线时遇到问题（IE 和 Firefox 完美显示）。
Basically, in my CSS, I have the following:
基本上，在我的 CSS 中，我有以下内容：
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
In my HTML, I have something like:
在我的 HTML 中，我有类似的内容：
<div class="hr"><hr /></div>
For some reason, in google chrome, the line is just not there. The problem now is, I have lots of these (around 25):
出于某种原因，在谷歌浏览器中，这条线不存在。现在的问题是，我有很多这样的（大约 25 个）：
因此，我只想修改我的 CSS，这样我就可以对我的 HTML 进行最小的更改。
Upon googling, I see that many have had this problem, but there does not seem to be a proper solution (not considering "drawing" a line and inserting the line as a pic!).
谷歌搜索后，我看到很多人都有这个问题，但似乎没有一个合适的解决方案（不考虑“画”一条线并将该线作为图片插入！）。
I would appreciate if someone could point me in the right direction to solve the above problem.
如果有人能指出我解决上述问题的正确方向，我将不胜感激。
Many thanks.
非常感谢。
回答by Blender
This might be your problem:
这可能是你的问题：
height: .05em;
Chrome is a bit funky with decimals, so try a fixed-pixel height:
Chrome 的小数点有点古怪，所以尝试固定像素高度：
height: 2px;
回答by AJW
I have try this my new code and it might be helpful to you, it works perfectly in google chromr
我已经尝试过这个我的新代码，它可能对你有帮助，它在 google chromr 中完美运行
hr {
color: #f00;
background: #f00;
width: 75%;
height: 5px;
}
回答by Benjamin Udink ten Cate
Or change it to height: 0.1em;orso, minimal size of anything displayable is 1px.
或者将其更改为height: 0.1em;orso，任何可显示的最小尺寸为 1px。
The 0.05 em you are using means, get the current font size in pixels of this elements and give me 5% of it. Which for 12 pixels returns 0.6 pixels which is too little to display. if you would turn up the font size of the div to atleast 20pixels it would display fine. I suppose Chrome doesnt round up sizes to be atleast 1pixel where other browsers do.
您使用的 0.05 em 意味着，获取此元素的当前字体大小（以像素为单位）并给我 5%。其中 12 个像素返回 0.6 个像素，这太小而无法显示。如果您将 div 的字体大小调高到至少 20 像素，它会显示正常。我想 Chrome 不会将其他浏览器的大小四舍五入到至少 1 像素。
回答by William Roy
you could also do it this way, in my case i use it before and after an h1 (brute force it ehehehe)
你也可以这样做，在我的情况下，我在 h1 之前和之后使用它（蛮力它 ehehehe）
.titleImage::before {
content: "--------";
letter-spacing: -3px;
}
.titreImage::after {
content: "--------";
letter-spacing: -3px;
}
If the letter spacing makes it so the line get in the text just use a margin to push it away!
如果字母间距使得该行进入文本，只需使用边距将其推开！
