Css Firefox的边框高度为<；人力资源>；而铬则不然

我正在尝试设计一个边框，使其由

1px白线下方1px绿线

hr{
    height: 1px;
    border: 0;
    background-color: #89a889;
    border-bottom: 1px solid #fafafa;
}

这在webkit中有效，但firefox似乎在线条的总高度中包含了边框。这将使底部边框覆盖绿线。我能怎么办

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #89a889;
    border-bottom: 1px solid #fafafa;
}

使用两个边框

或者，如果您真的想让它与背景色配合使用，请使用

box size:content-box

让Firefox以正常CSS框模型显示

hr

您可能希望包含其他供应商前缀

hr {
    height: 1px;
    border: 0;
    background-color: red;
    border-bottom: 1px solid blue;
    -moz-box-sizing: content-box;
}

---

您可以设置

-moz框大小：内容框；框大小：内容框。UA样式表将其设置为边框框大小。
如果要使用
背景色，我添加了另一种解决方案，不过我建议使用边框。