一像素1px在浏览器上出现视觉上的差异，显示的粗细不一样

出现的问题

最近做页面，出现一个问题，页面上有几条线，我直接写成height为1px的div,结果页面写完了发现，命名用的同一个类名，为什么显示的粗细不一样，很确定这就是一条线，用的样式一毛一样的。而且浏览器放大缩小，变成了一会粗一会细，很郁闷，有没有。觉得这是浏览器对像素处理的问题，就么有管。结果测试说会提bug,还是老老实实的改吧；
附加图一张：

解决方案

第一种方式

div{
height:5px;
transform:scale(1 , 0.2);
};

先增加height的值，看增加到几的时候，视觉上的高度会一样，估计3px就可以了，但是不好计算所以就用了5px。
改过如下图：

after不管用

试了after,发现并不管用啊，还是有的粗有的细，这里就不发图了，看图一；