为什么我的孩子身高：100％不像素完美？

Question

我在这里有一个非常简单的加载栏：

https://codepen.io/Ha1fDead/pen/LjKpjQ

.progress-bar {
  width: 200px;
  height: 62px;
  background-color: teal;
  border: 6px solid black; 
}

.progress-bar-shade {   
  width: 66%;   
  height: 100%;
  background-color: red;
}

<div class="progress-bar-container">
  <div class="progress-bar">
    <div class="progress-bar-shade">
    </div>
  </div>
</div>

在Chrome中我的1080p显示器显示屏上显示正常：

然而，在我的1440p显示器上，出现了一个视觉错误：

（注意剪辑到父母边框的背景上方和下方1px。）

（放大后的另一个图形错误）

我可以通过使用浏览器控件放大来改变问题（甚至在1080显示器上复制它）。在这些情况下，有时阴影颜色为1px短（底部可见青色背景）。我在所有方向（顶部边框，左边框，右边框和底部边框）都注意到了这一点。我无法复制的唯一浏览器是Firefox，它总能正确显示。

指定box-sizing: border-box会稍微改变一下行为，但放大会导致同样的问题。

造成这种像素不完美的原因是什么？如何纠正？

Answer 1

实际上与border有关，使用outline代替您解决问题。你在评论中推断出这几乎肯定是一个舍入误差。

使用border时，会将12px添加到对象的高度和宽度。但是当你缩放时，12px和外部div分别相乘然后合并。这意味着内部div的高度取决于边框的显示厚度。然而，当使用outline时，内部div不关心边界的厚度，因为它在之后应用，并且可以简单地复制外部div的精确高度。这也可以解释为什么边界较薄时毛刺不那么突出。

无论推理如何，这里的代码都使用outline代替：

.progress-bar-container {
  
}

.progress-bar {
  width: 200px;
  height: 62px;
  background-color: teal;
  outline: 6px solid black;
}

.progress-bar-shade {
  width: 66%;
  min-height: 100%;
  background-color: red;
  border: none;
}

<div>
  <div class="progress-bar-container">
    <div class="progress-bar">
      <div class="progress-bar-shade">
      </div>
    </div>
  </div>
</div>