火狐包括在<hr>高度边界，而Chrome不

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

使用两个边框。

Demo

或者，如果你真的想与背景颜色不起作用，使用box-sizing: content-box让火狐与正常的CSS盒模型显示hr。

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

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

Demo

Answer 2

您可以设置-moz-box-sizing: content-box; box-sizing: content-box;。 UA样式表将其设置为边框大小。