这是Chrome中的渲染错误吗？
使用Google Chrome 107.0.5304.32(官方版本)测试版(64位)
.meters {
display: grid;
grid-template-columns: 4rem 1fr 3rem;
grid-auto-rows: 1.3rem;
align-items: center;
gap: 0.8rem;
}
.meter {
display: flex;
height: 100%;
border: solid 3px black;
}
.fill {
background: blue;
}<div class="meters">
<p>0 Sterne</p>
<div class="meter">
<div class="fill" style="width: 100%;"></div>
</div>
<p>27%</p>
<p>1 Sterne</p>
<div class="meter">
<div class="fill" style="width: 10.989%;"></div>
</div>
<p>11%</p>
<p>2 Sterne</p>
<div class="meter">
<div class="fill" style="width: 32.4176%;"></div>
</div>
<p>32%</p>
<p>3 Sterne</p>
<div class="meter">
<div class="fill" style="width: 11.5385%;"></div>
</div>
<p>12%</p>
<p>4 Sterne</p>
<div class="meter">
<div class="fill" style="width: 17.5824%;"></div>
</div>
<p>18%</p>
</div>我看到蓝色div周围是白色的:
如果我将边界设置为4px或更多，白色将消失.对于1px，它也运行得很好.对于2px，我只看到底部的白色，顶部和底部有3px个白色.
Amaury Hanser在 comments 中提到了zoom ，所以我判断了一下，当放大到110%时，白色也消失了.
我甚至try 在.meter上设置overflow: hidden;，在fill上设置height: 150%;，这样在判断器中可以看到填充比容器大，但它仍然显示白色边框:
