为什么厚厚的Hr显示2条丑陋的线条（CSS）？

Question

应用此样式制作粗HR标记

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

然后这是IE＆amp;铬：

正如你所看到的那样，在粗红线上方有一条很小的线条，真的很难看。

那么如何删除那条小线？

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

注意：我仍然比其他人更喜欢hr。

Answer 1

使用border-top或border-bottom

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

Fiddle