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

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


使用两个边框。

Demo

另外,如果您确实希望它与背景色一起使用,请使用box-sizing: content-box来使Firefox显示具有常规CSS框模型的hr

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

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


Demo

关于css - Firefox的边框高度<hr>,而chrome的边框不高,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13219709/

10-11 23:29
查看更多