使用HTML/CSS的水平线

我试图在我的博客网站上设置一条水平线，但在谷歌chrome（IE和Firefox）中显示这条线时遇到了麻烦

基本上，在我的CSS中，我有以下内容：

div.hr {
background: #fff  no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}

div.hr hr {
display: none;
}

在我的HTML中，我有如下内容：

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

出于某种原因，在谷歌浏览器中，这条线根本就不存在。 现在的问题是，我有很多（大约25个）：

---

因此，我只想修改CSS，这样我就可以对HTML进行最小的更改

通过谷歌搜索，我发现很多人都有这个问题，但似乎没有一个合适的解决方案（不考虑“画”一条线并将其作为图片插入！）

如果有人能为我指出解决上述问题的正确方向，我将不胜感激

---

非常感谢。

这可能是您的问题：

height: .05em;

Chrome的小数有点时髦，所以请尝试固定像素高度：

height: 2px;

---

或改为

高度：0.1米orso，任何可显示内容的最小大小为1px

你正在使用的0.05 em意味着，获取该元素的当前字体大小（以像素为单位），并为我提供5%的字体大小。对于12像素，返回0.6像素，太小而无法显示。如果您将div的字体大小调到至少20像素，则显示效果会很好。我想Chrome不会像其他浏览器那样将大小四舍五入到至少1像素。
我已经尝试了我的新代码，它可能会对您有所帮助，它在google chromr中工作得非常完美

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}

你也可以这样做，在我的例子中，我在h1之前和之后使用它（蛮力）

如果字母间距使行进入文本，只需使用边距将其推开即可
 移除显示时会发生什么：无；此标记的目的是什么：
当您将
设置为
显示：无？如果您正在寻找语义结构，至少对于screenreader用户来说，您已经删除了它。你还是把沙发放进去吧。多谢你了。这解决了我的问题，我花了3个小时寻找解决方案！再次感谢！没问题。希望其他人不必在这方面花费太多时间：感谢本杰明的解释！我在这里学到了一些东西！
.titleImage::before {
content: "--------";
letter-spacing: -3px;
}

.titreImage::after {
content: "--------";
letter-spacing: -3px;
}