css - 使用 rem 单位时出现 Chrome 缩放问题

Question

我们想让我们网站上所有内容的大小都达到实际比例的 90%(幸运的是我们使用的是 rem 单位)，所以对我们来说最简单的解决方案是编写 html { font-size: 0.9rem; } 规则。然而，我们在 chrome 中面临着一些缩放比例的错误——一些元素彼此之间有更大的边距，而不是精确的宽度/高度等。它在 Safari 和 Firefox 中工作得很好......你可以在 fiddle 中看到这个例子。 , 一些按钮有不需要的最后 1px 高度的白线而不是背景。

编辑:它似乎只出现在视网膜显示器上

编辑 2:我已经将 chrome 从 72 更新到 73，现在可以了

Answer 1

问题出在你的背景上。将其更改为“#ff0000”，差距就会消失。

如果您将渐变更改为'background-image'，然后添加'background-color'；您的问题似乎已解决:

.button.primary {
    background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
    background-color: #fac364;
    border: 0;
}

更新了你的 fiddle :https://jsfiddle.net/kcazfps8/