css - Firefox 的边框高度为而铬没有

Question

我正在尝试设置边框的样式，使其包含

1px 白线下方 1px 绿线

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

这在 webkit 中有效，但 Firefox 似乎将边框包含在行的总高度中。这使得底部边框覆盖绿线。我能做些什么呢？

Answer 1

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

使用两个边框。

演示

或者，如果您真的希望它与背景颜色一起使用，请使用box-sizing: content-boxFirefox 以hr使用正常的 CSS 框模型显示。

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

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

演示

Answer 2

你可以设置-moz-box-sizing: content-box; box-sizing: content-box;. UA 样式表将其设置为边框大小。