html - 如果 div 有边框，则不需要 1px 填充。仅在 Chrome

Question

类似于这个问题(解决方案没用):Chrome 1px line bug
我的代码:https://jsfiddle.net/91gryhdu/2/ ( parent 有蓝色边框，红色背景。 child 没有边框和黑色背景)
您应该看不到任何红色，但在 chrome 中，如果存在蓝色边框，则会出现红色边缘。根据缩放级别，将有 0、2 或 4 条红线。从来没有 1 或 3。
在我的计算机上，默认缩放 (100%) 如下所示:

如果我缩放 > 100%:

如果我缩放 < 100%:

无论缩放如何，这都是它应该看起来的样子。无论缩放级别如何，Firefox 都不会显示红色。
我的代码有类 circle并注释掉 border-radius因为我在尝试仅使用 CSS 创建以下圆圈时遇到了这个问题。使用盒子更容易看到问题。

我试过相对与绝对定位，不同 display设置，定义所有边距、em/px/%、填充等。没有任何影响。这让我相信它是一个 CSS 错误。我在网上找到的“解决方案”，只修复了视觉方面。
所需的圆圈非常小，中间的白点在 Chrome 中变得明显偏离中心。只是看起来不太对劲就够了。
如何在没有图像/svg 的情况下解决此问题？ 我只需要一个带边框的彩色圆圈内的小白色圆圈。连接线和扁平的顶部无关紧要。重要的是白点以原子水平为中心。
我发现我可以在其他两条边上添加一个边距来抵消不需要的边距。理论上我可以使用 JS 来检测缩放并应用 CSS。似乎是一个绝望/不可靠的解决方案。
我正在兜兜转转试图弄清楚这一点......

Answer 1

您可以使用 flexbox 轻松完成此操作，如下所示:

.outer-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .6rem;
  height: .6rem;
  padding: .4rem;
  background: blue;
  border-radius: 50%;
}

.inner-dot {
  background: white;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

<div class="outer-circle">
  <div class="inner-dot"></div>
</div>

Chrome 错误可能是由于元素的大小单位造成的，它们很小，并且您的 px 值可能无法很好地除以 4，这对应于例如视网膜 Mac 等。如果您的像素不能在不创建浮点值的情况下除以 4，您可能会得到这样的不需要的伪影，并且居中的元素可能是死点之外的像素，因为算法必须决定将颜色放在哪里(它不能将颜色放在像素之间的中间)。