具有相同高度的多个进度条看起来彼此不同

Question

我有一个问题，我有一个用于游戏升级项目的64x64图标。条形图位于底部，它的高度是 0.2rem;

高度大于8px的其他条（更重要的条）都显示相同。但是，当我低于8px或0.2rem时，即使对于所有5个柱都是相同的css类，某些柱看起来比其他柱大一些（我猜是0.3rem），这确实使我头晕。为什么会这样？

我的显示器具有高清就绪的分辨率。我尝试过放大和缩小页面，但大小条的顺序却发生了变化（即：如果页面100％缩放时第一项是确定的，那么同一项的条高度会放大115％）

我在Chrome上。这是我的浏览器中未缩放的游戏图像：

放大此图像时，请密切注意：第三和第五项的进度条增加了，但是它们都具有相同的类！

这是另一张图像，页面缩放较大： 在这里，只有第四个项目增加了栏的高度...

栏的代码：

.item-img {
  width: 64px;
  height: 64px;
  box-shadow: 0 0 2px 0 var(--black);
}
.upgrade-bar {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 56px;
  height: 0.1rem;

  outline: 1px solid var(--grey);
  outline-offset: 0.1rem;
  background-color: var(--white);
}
.upgrade-prog {
  width: 60%;
  height: 0.1rem;

  background-color: var(--blue);
  box-shadow: 0 0 4px 0 var(--blue);
}

这仅仅是Chrome或CSS中的错误，是否有解决方案或解决方法？我真的需要这些小条，甚至是0.1rem，因为它们不是很重要。 （如下面的大号指示该项目的剩余时间）。

任何想法都有帮助！谢谢