html - 为什么我的 child 高度是: 100% not pixel perfect?

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 显示器上复制它)。在这些情况下，有时阴影颜色短 1 像素(底部可见蓝绿色背景)。我在各个方向(上边框、左边框、右边框和下边框)都注意到了这一点。我唯一无法复制的浏览器是 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>