如果 div 有边框，则不需要 1px 填充。仅在镀铬答案

【问题标题】：Unwanted 1px padding if div has a border. Only in chrome如果 div 有边框，则不需要 1px 填充。仅在镀铬
【发布时间】：2020-12-30 12:30:26
【问题描述】：

类似这个问题（解决方法没用）：Chrome 1px line bug

我的代码：https://jsfiddle.net/91gryhdu/2/（父母有蓝色边框，红色背景。孩子没有边框，黑色背景）

您应该看不到任何红色，但在 chrome 中，如果存在蓝色边框，则会出现红色边缘。根据缩放级别，将有 0、2 或 4 条红线。从不 1 或 3。

在我的电脑上，默认缩放 (100%) 如下所示：

如果我缩放 > 100%：

如果我缩放

无论缩放如何，这都是它应该看起来的样子。无论缩放级别如何，Firefox 都不会显示红色。

我的代码有 circle 类并注释掉了 border-radius，因为我在尝试仅使用 CSS 创建以下圆圈时遇到了这个问题。更容易看到盒子的问题。

我尝试过相对与绝对定位，不同的display 设置，定义所有边距、em/px/%、填充等。没有任何影响。这让我相信它是一个 CSS 错误。我在网上找到的“解决方案”，只修复了视觉方面。

所需的圆圈非常小，中心的白点在镀铬中变得明显偏离中心。它只是看起来不太正确。

如果没有图像/svg，我该如何解决这个问题？我只需要一个带边框的彩色圆圈内的白色小圆圈。连接线和扁平顶部无关紧要。重要的是白点以原子级别为中心。

我发现我可以在其他两个边缘添加一个边距来抵消不需要的边距。理论上我可以使用 JS 来检测缩放并应用 CSS。似乎是一个绝望/不可靠的解决方案。

我正在兜圈子试图弄清楚这一点......

【问题讨论】：

标签： html css google-chrome flexbox

【解决方案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，您可能会得到这样的不需要的伪影，并且居中的元素可能是死点之外的像素，因为算法必须决定将颜色放在哪里（它不能把颜色放在像素之间）。

【讨论】：