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

5ssjco0h 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(109)

与此问题类似（解答无用）：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。看起来像是一个绝望/不可靠的解决方案。
我在兜圈子想弄明白...

css

来源：https://stackoverflow.com/questions/63856278/unwanted-1px-padding-if-div-has-a-border-only-in-chrome

2条答案

按热度按时间

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而不创建浮点值，你可能会得到像这样的不想要的伪像，中心元素可能是偏离死点的像素，因为算法必须决定把颜色放在哪里（它不能把颜色放在像素之间的一半）。

赞(0）回复(0）举报 2023-02-06

1rhkuytd2#

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

赞(0）回复(0）举报 2023-02-06

我来回答

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

2条答案

相关问题

热门标签

最新问答