我正在尝试设置边框的样式,使其包含一个
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/