CSS h1發現/ dotter邊框

我有以下代碼，在'h1'標籤上設置點/底部邊框。CSS h1發現/ dotter邊框

完整的代碼可以在moorparksdevon.uk

h1 { 
    padding: 0 0 7px 0; 
    margin: 0 0 10px 0; 
    display:table; 
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%); 
    background-position: bottom; 
    background-size: 3px 1px; 
    background-repeat: repeat-x; 
}

找到不過......我似乎沒有絲毫一致的結果。我在這裏錯過了什麼嗎？

Safari瀏覽器的Mac - 工作（https://i.stack.imgur.com/mzRTM.png）

Chrome的Mac的一些點 - - 工作（https://i.stack.imgur.com/MAHgm.jpg）

的Firefox的Mac點的地段沒有點在所有（https://i.stack.imgur.com/5sYfL.jpg）

來源

2017-02-04 Scott Robinson

斯科特，請包括所有的代碼，並重現該問題。 http://stackoverflow.com/help/mcve在Chrome瀏覽器，firefox和safari中，我看起來很好。http://codepen.io/anon/pen/KaezJQ –

我已經包含一個URL - 我要去爭取重現問題，如果你看到它的罰款......我已經發布了屏幕截圖，顯示了三個不同的虛線邊框。 –