Question

我想在我的博客网站上找到一条水平线，但是我在谷歌浏览器中显示这一行时遇到了麻烦（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进行微小的更改。

< / p>

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

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

非常感谢。

Answer 1

这可能是你的问题：

height: .05em;

Chrome有点小巧，所以请尝试使用固定像素高度：

height: 2px;

Answer 2

我已尝试使用我的新代码，它可能对您有所帮助，它在google chromr中完美运行

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

Answer 3

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

你正在使用的0.05 em意味着，得到这个元素的当前字体大小，并给我5％。对于12个像素，其返回0.6像素，这太小而无法显示。如果你将div的字体大小调到至少20像素，它会显示正常。我认为Chrome不会将大小整理为至少1个像素，而其他浏览器也是如此。

Answer 4

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

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

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

如果字母间距使得文本中的线条得到，则只需使用边距将其推开！