为什么 1px 宽度的线在左数不同时看起来不同？

Question

为什么这两条线的宽度不同？它们都应该是 1px；

唯一的区别是它们的左数不同，但这为什么会导致宽度变化呢？

顺便说一下，我的chrome版本是84.0.4147.105（win10），在firefox中看起来是正确的。

body {
        margin: 0;
        padding: 0
      }
      .demo {
        width: 500px;
        height: 500px;
        position: relative;
        background-color: yellow;

      }
      .line, .line2 {
        left: 300px;
        position: absolute;
        width: 1px;
        background-color: red;
        height: 500px;
      }
      .line2 {
        left: 402px;
       }

<div class="demo">
  <div class="line"></div>
  <div class="line2"></div>
</div>

Answer 1

我发现因为我将 chrome 缩放到 125% 然后它导致了问题

顺便说一句，我尝试在 Firefox 中缩放至 125%，但它仍然显示正确。

感谢大家。