Firefox 包含高度为

---

的边框，而 chrome 则不包含

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

1 像素白线下方 1 像素绿线

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;
}

使用两个边框。

Demo http://jsfiddle.net/eCaxz/

或者，如果您确实希望它与背景颜色一起使用，请使用box-sizing: content-box让 Firefox 显示hr与普通的CSS盒子模型。

您可能想要包含其他供应商前缀。

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

Demo http://jsfiddle.net/eCaxz/1/