javascript - 为什么厚 Hr 显示 2 行很难看(CSS)？

Question

应用此样式制作厚 HR 标签

.thickHr{
    border: none;
    height: 6px;
    /* Set the hr color */
    color: red; /* old IE */
    background-color: red; /* Modern Browsers */
}

然后这是在 IE 和 Chrome 中的结果:

如你所见，在粗红线之上有一条细线，非常难看。

那么如何去除那条细线呢？

如果这就是 Hr 的呈现方式，那么我们可以使用其他样式(不是 Hr)来做同样的事情吗？

注意:与其他类型相比，我仍然更喜欢hr。

Answer 1

使用边框顶部或边框底部

     .thickHr{
      border-top: 6px solid red ;
      color: red; /* old IE */
      background-color: red; /* Modern Browsers */
              }

Fiddle