使用HTML/CSS的水平线

AJW*_*AJW 16 html css html5 google-chrome css3

我想在我的博客网站上找到一条水平线,但是我在谷歌浏览器中显示这条线时遇到了麻烦(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;
}
Run Code Online (Sandbox Code Playgroud)

在我的HTML中,我有类似的东西:

<div class="hr"><hr /></div>
Run Code Online (Sandbox Code Playgroud)

出于某种原因,在谷歌浏览器中,线路不存在.现在的问题是,我有很多这些(大约25个):


因此,我希望只修改我的CSS,以便我可以对我的HTML进行微小的更改.

在谷歌搜索,我看到许多人有这个问题,但似乎没有一个正确的解决方案(不考虑"绘制"一条线并插入线作为图片!).

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

非常感谢.

Ble*_*der 17

这可能是你的问题:

height: .05em;
Run Code Online (Sandbox Code Playgroud)

Chrome有点小巧,所以尝试固定像素高度:

height: 2px;
Run Code Online (Sandbox Code Playgroud)


小智 10

我试过这个我的新代码,它可能对你有所帮助,它在google chromr中完美运行

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}
Run Code Online (Sandbox Code Playgroud)