CSS - 水平/垂直線が持っているさまざまな厚さ

Question

私は自動的に角度2アプリで発生したグリッドのいくつかの種類を作成しようとしていると、それは次のようになります。

https://jsfiddle.net/Arcanst/ayv31363/3/

.vertical-line { 
    position: absolute; 
    width: 1px; 
    background-color: #3c8dbc; 
} 

.horizontal-line { 
    position: absolute; 
    height: 1px; 
    background-color: #3c8dbc; 
} 

私は」 1px幅のdivを垂直線として使用し、1pxの高さを水平線として使用します。残念ながら、彼らは異なる厚さを持っているようです（もしjsfiddleが問題を明らかにしていなければ、それはちょうどFirefoxで起こっているかもしれません）。ここで私はそれを参照してくださいする方法のスクリーンショットです：

あなたが見ることができるように、彼らは同じCSSクラスを持っているとFirefoxのツールが、火曜日と水曜日の間に縦線が水曜日と木曜日の間で1よりも厚く、実際には同じ幅であることを示します。同じ問題は水平線で見ることができます。

これを防ぐにはどうすればよいですか？私は垂直/水平線のために異なるアプローチを使うべきですか？

敬具、 ダニエル