Firefox的边框高度为< hr& gt;.铬没有 [英] Firefox includes border in height of <hr> whilst chrome does not

问题描述

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

I'm trying to style a border so that it consist of a

1px白线下方的1px绿线

1px green line below a 1px white line

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

这在webkit中有效，但是firefox似乎在行的总高度中包括了边框.这使底部边框覆盖了绿线.我该怎么办?

this works in webkit, but firefox seems to include the border in the total height of the line. This makes the bottom border cover the green line. Whan can I do about this?

推荐答案

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

使用两个边框.

演示

或者，如果您真的希望它与背景色一起使用，请使用box-sizing: content-box来使Firefox显示具有常规CSS框模型的hr.

Alternatively, if you really want it to work with a background color, use box-sizing: content-box to get Firefox to display an hr with the normal CSS box model.

您可能要包括其他供应商前缀.

You may want to include other vendor prefixes.

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

演示

这篇关于Firefox的边框高度为< hr& gt;.铬没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！