如果div有边框，多余的1 1px填充。只含铬

Question

类似于这个问题(解决方案是无用的)：Chrome 1px line bug

我的代码：https://jsfiddle.net/91gryhdu/2/ (父代码有蓝色边框，红色背景。儿童没有边框和黑色背景)

你不应该看到任何红色，但在铬，红色边缘显示，如果蓝色边框存在。根据缩放级别的不同，将出现0、2或4条红线。从来没有1或3。

在我的计算机上，默认缩放(100%)如下所示：

​

​

如果我放大> 100%：

​

​

如果我放大< 100%：

​

​

这是它应该是什么样子，不管缩放。火狐没有显示红色，无论缩放级别。

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

​

​

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

所需的圆圈非常小，中心的白点明显地偏离了铬的中心。看上去不太好就够了。

如何在没有图片/svg的情况下解决这个问题？，我只需要在一个有边框的彩色圆圈内有一个小的白色圆圈。连接线和平顶并不重要。重要的是，白点是在原子水平的中心。

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

我要绕圈子想办法解决这个问题.

Answer 1

您可以很容易地使用柔性盒来完成这一任务，如下所示：

​

.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，这与视网膜may等高分辨率显示器相对应。如果在不创建浮点值的情况下不能将像素除以4，那么您可能会得到像这样的不需要的工件，而居中元素可能是死中心之外的一个像素，因为算法必须决定将颜色放在哪里(不能在像素之间放置颜色)。