使用 HTML/CSS 的水平线答案

【问题标题】：Horizontal line using HTML/CSS使用 HTML/CSS 的水平线
【发布时间】：2017-01-10 11:56:49
【问题描述】：

我正在尝试在我的博客网站中设置一条水平线，但在 google 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 进行最小的更改。

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

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

非常感谢。

【问题讨论】：

移除显示后会发生什么：无；
这个标记的目的是什么：<div class="hr"><hr /></div> 当您将<hr> 设置为display: none; 时？如果您正在寻找语义结构，至少对于屏幕阅读器用户而言，您刚刚删除了它。你不妨把 div 放在那里。

【解决方案1】：

这可能是你的问题：

height: .05em;

Chrome 的小数点有点古怪，所以尝试固定像素高度：

height: 2px;

【讨论】：

【解决方案2】：

我已经尝试了这个我的新代码，它可能对你有帮助，它在 google chromr 中完美运行

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

【讨论】：

【解决方案3】：

或将其更改为height: 0.1em; orso，任何可显示的最小尺寸为1px。

您使用的 0.05 em 表示，获取此元素的当前字体大小（以像素为单位）并给我 5%。对于 12 个像素，返回 0.6 个像素，太小而无法显示。如果你将 div 的字体大小调大到至少 20 像素，它会显示得很好。我想 Chrome 不会像其他浏览器那样将尺寸四舍五入到至少 1 像素。

【讨论】：

【解决方案4】：

你也可以这样做，在我的情况下，我在 h1 之前和之后使用它（蛮力它 ehehehe）

.titleImage::before {
content: "--------";
letter-spacing: -3px;
}

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

如果字母间距使行进入文本，只需使用边距将其推开！

【讨论】：