Css样式width=1px粗细不一样的问题解决方法

在模仿某商城样式时需要使用如下图竖线 |

我的方法是用css样式设置一个width=1px,height=3px的竖线

.line {
	background-color:black;
	width:1px;
	height:13px;
	}

结果出现粗细不一样的问题

我从网上找到了两种解决方法
第一种方法是将width修改为2px,然后使用scale(0.5,1)将宽修改为原来的1/2，高不变。

.line {
	background-color:black;
	width:2px;
	height:13px;
	transform:scale(0.5,1)
	}

点击跳转到原作者文章

第二种方法是将背景颜色改为透明，然后使用border-left 或 border-right 画出竖线。

.line {
	background-color:transparent;
	border-left:1px solid black;
	height: 13px;
	}

点击跳转到原作者文章
最后，不懂这是什么原因导致的，有哪位大佬知道的可以解释一下嘛！！