如果div有边框，请不要使用1px的填充仅镀铬

如何解决如果div有边框，请不要使用1px的填充仅镀铬

类似于此问题（解决方案无用）：Chrome 1px line bug

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

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

在我的计算机上，默认缩放（100％）如下：

如果我缩放> 100％：

如果我缩放

无论缩放如何，这都是它的外观。无论缩放级别如何，Firefox都不会显示红色。

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

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

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

在没有图像/ svg的情况下如何解决此问题？我只需要在带有边框的彩色圆圈内放置一个白色小圆圈。连接线和扁平顶部无关紧要。重要的是白点位于原子水平上。

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

我正在圈子里想办法解决这个问题...

解决方法

您可以使用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，这对应于例如视网膜Macs等。如果无法在不创建浮点值的情况下将像素除以4，则可能会出现类似这样的不必要伪像，并且居中元素可能偏离了死点像素，因为算法必须决定将颜色放在哪里（它不能将颜色置于像素之间的中间位置）。