火狐包括在<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樣式表將其設置爲邊框大小。