使用Rem单位时Chrome缩放问题

Question

我们希望使我们网站上的所有内容的大小都达到实际比例的90％（幸运的是，我们使用的是rem单位），所以对我们来说最简单的解决方案是编写html { font-size: 0.9rem; }规则。但是，我们遇到了一些与chrome缩放有关的错误-一些元素的边距较大，而不是精确的宽度/高度等。在Safari和Firefox中效果很好...您可以在fiddle中看到示例，一些按钮的最后1px高度的白线代替了背景。

编辑：好吧，它似乎仅在视网膜显示器上出现

编辑2 ：我将chrome从72更新为73，现在可以了

Answer 1

问题来自您的背景。将其更改为“＃ff0000”，差距就会消失。

如果将渐变更改为“背景图像”，然后添加“背景颜色”；您的问题似乎已解决：

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

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