css中设置height: 1px 出现的线条粗细不一的问题

原因: 浏览器的差异

解决办法如下

1.设置border-bottom: 1px solid #999

.line {
        transform: translate(-50%);
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60%;
        height: 0px;
        border-bottom: 1px solid #999;
      }

效果如图:

2.使用scale属性，具体参照这篇博客

点击我进行访问