Html 为什么我的孩子身高：100%不完美？

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

。进度条{
宽度：200px；
高度：62px；
背景色：青色；
边框：6px纯黑；
}
.进度条阴影{
宽度：66%；
身高：100%；
背景色：红色；
}

在我的1080p Chrome显示器上，这显示得很好：

但是，在我的1440p显示器上，有一个视觉错误：

（请注意背景上方和下方的1px剪辑到父对象的边框上）

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

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

指定

box size:border box

会在某种程度上改变行为，但放大会导致相同的问题

---

是什么导致了这种像素缺陷？我如何纠正它？

这实际上与

边框有关，使用
轮廓来解决您的问题。这几乎可以肯定是一个舍入误差，正如你在评论中推断的那样

使用
边框时，会将12px添加到对象的高度和宽度。但是，当您缩放时，12px和外部div分别相乘，然后合并。这意味着内部div的高度取决于显示的边框厚度。而当使用
轮廓时
内部div并不关心后面应用的边框的厚度，它可以简单地复制外部div的确切高度。这也解释了为什么边框较薄时，小故障不那么突出

不管理由如何，下面是您使用
大纲
的代码：


。进度条容器{
}
.进度条{
宽度：200px；
高度：62px；
背景色：青色；
外形：6px纯黑；
}
.进度条阴影{
宽度：66%；
最小高度：100%；
背景色：红色；
边界：无；
}

间隙是由渲染引擎中的像素舍入错误引起的。在我看来（在你的代码笔中），重叠部分不是纯红或青色，而是两种颜色的混合。我有一个类似的假设，但不知道如何修复或解决它。有什么想法吗？正在检查我的上一张图像的十六进制值（使用chrome调试器颜色选择器从代码笔中）。。。红色：#ff0000；TEAL#008080；右边框：#605050（混合）；上边框（混合的底部像素）：#8b3a3a；混合顶部（混合的顶部像素）：#002727；这可能只是设计不可避免的结果。看看不同的颜色，或者它们的不同排列，是否能为您解决问题。我无法在KDE上用铬重现这个问题。没有任何缩放会导致矩形关闭。
.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>