使用rem单位时Chrome缩放问题

Question

我们想让我们网站上的所有内容的大小达到实际比例的90％（运气我们使用的是rem单位），所以对我们来说最简单的解决方案就是编写html { font-size: 0.9rem; }规则。然而，我们面临着一些在Chrome中缩放的错误 - 一些元素在另一个元素上有更大的余量，而不是精确的宽度/高度等。它在Safari和Firefox中运行良好...你可以在fiddle看到这里的例子，有些按钮不合需要最后1px高度白线而不是背景。

编辑：好吧它似乎只发生在视网膜显示器上

编辑2：我已经将铬从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;
}

更新了你的小提琴：https://jsfiddle.net/kcazfps8/