使用HTML/CSS的水平线

我想要在我的博客网站中获得一条水平线，但是我在显示google chrome中的线时遇到了问题（IE和Firefox完美显示）。使用HTML/CSS的水平线

基本上，我的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做最小的更改。

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

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

非常感谢。

来源

2011-09-05 AJW

当你删除显示时会发生什么：none; –

当你将'

'设置为'display：none;'时，这个标记的用途是什么：'

''？如果您正在寻找语义结构，至少对于屏幕阅读器用户而言，您刚刚删除了它。你可能会把div放在那里。 – steveax

这可能是你的问题：

height: .05em;

Chrome是一个有点时髦与小数，所以尽量固定像素高度：

height: 2px;

来源

2011-09-05 00:43:54 Blender

非常感谢Blender。这解决了我寻找解决方案3小时的问题！非常感谢！ – AJW

没问题。希望别人不必花太多时间在这：P – Blender

或更改为height: 0.1em;公积金的最小尺寸任何可显示的内容都是1px。

您正在使用的0.05 em表示获取当前字体大小（以像素为单位），并给我5％。 12像素返回0.6像素，这是显示太少。如果您将div的字体大小调整为至少20像素，则它会显示正常。我想Chrome不会在其他浏览器所能达到的最大像素大小。

来源

2011-09-05 01:09:01

谢谢你的解释本杰明！我在这里学到了东西！ – AJW

我尝试这是我的新的代码，它可能对你有所帮助，它完全在谷歌chromr

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

来源

2013-04-15 11:54:43

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

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

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

如果字母间距使得它如此行文本得到的只是使用保证金推走！

来源

2017-01-10 03:56:49

使用HTML/CSS的水平线

回答

相关问题