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

Question

关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。

去年关闭。




Improve this 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%，它仍然显示正确。
谢谢大家。