css div有边框时不需要的1px填充,仅在 chrome 合金中

5ssjco0h  于 2023-02-06  发布在  其他
关注(0)|答案(2)|浏览(108)

与此问题类似(解答无用):Chrome 1px line bug
我的代码:https://jsfiddle.net/91gryhdu/2/(父级有蓝边框红背景,子级无边框黑背景)
你不应该看到任何红色,但是在 chrome 合金中,如果有蓝色边框,红色边缘就会出现。根据缩放级别,可能会有0、2或4条红线。永远不会有1或3条。
在我的计算机上,默认缩放比例(100%)如下所示:

如果缩放比例〉100%:

如果缩放比例〈100%:

这是它应该看起来像不考虑缩放。火狐没有显示红色,无论缩放水平。
我的代码包含circle类,并且注解掉了border-radius,因为我在尝试只使用CSS创建下面的圆圈时遇到了这个问题。

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

所需的圆圈非常小,中心的白色在镀 chrome 中明显偏离中心,这足以让你看起来不太对劲。

**如果没有images/svg,我如何解决这个问题?**我只需要在一个有边框的彩色圆圈中添加一个白色的小圆圈。连接线和平顶并不重要。重要的是白点在原子级别居中。

我发现我可以在另外两个边缘上加一个边距来抵消不需要的边距。理论上我可以用JS来检测缩放和应用CSS。看起来像是一个绝望/不可靠的解决方案。
我在兜圈子想弄明白...

yzxexxkh

yzxexxkh1#

你可以很容易地用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错误可能是由于元素的大小单位,它们很小,您的像素值可能无法很好地除以4,这对应于视网膜Mac等高分辨率显示器。如果您的像素无法除以4而不创建浮点值,你可能会得到像这样的不想要的伪像,中心元素可能是偏离死点的像素,因为算法必须决定把颜色放在哪里(它不能把颜色放在像素之间的一半)。

1rhkuytd

1rhkuytd2#

这是由于Chrome错误(https://groups.google.com/a/chromium.org/g/paint-dev/c/ERXM1sHcpyQ
我在Chrome vesrion 108.0.5359.125中遇到了同样的问题,现在我已经更新到最新的(109.0.5414.120),差距已经消失。
(我知道这不是一个解决方案,因为你不能强迫你的用户更新,但希望这个问题将成为过时的时间)

相关问题