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

2 つの境界線を使用します。

デモ

または、本当に背景色で動作させたい場合は、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スタイルシートはそれをボーダーボックスサイズに設定します。