与此问题类似(解答无用):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。看起来像是一个绝望/不可靠的解决方案。
我在兜圈子想弄明白...
2条答案
按热度按时间yzxexxkh1#
你可以很容易地用flexbox做到这一点,如下所示:
Chrome错误可能是由于元素的大小单位,它们很小,您的像素值可能无法很好地除以4,这对应于视网膜Mac等高分辨率显示器。如果您的像素无法除以4而不创建浮点值,你可能会得到像这样的不想要的伪像,中心元素可能是偏离死点的像素,因为算法必须决定把颜色放在哪里(它不能把颜色放在像素之间的一半)。
1rhkuytd2#
这是由于Chrome错误(https://groups.google.com/a/chromium.org/g/paint-dev/c/ERXM1sHcpyQ)
我在Chrome vesrion 108.0.5359.125中遇到了同样的问题,现在我已经更新到最新的(109.0.5414.120),差距已经消失。
(我知道这不是一个解决方案,因为你不能强迫你的用户更新,但希望这个问题将成为过时的时间)