时间戳

首页 > 解决方案 > 使用 rem 单位时的 Chrome 缩放问题

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

问题描述

我们想让我们网站上的所有内容都达到实际比例的 90%（幸运的是我们使用的是 rem 单位），所以对我们来说最简单的解决方案是编写html { font-size: 0.9rem; }规则。但是，我们在 chrome 中遇到了一些缩放问题——一些元素的边距更大，宽度/高度不精确等。它在 Safari 和 Firefox 中效果很好......你可以在fiddle中看到这个例子，一些按钮不受欢迎最后 1px 高度白线而不是背景。

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

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

在此处输入图像描述

标签： cssgoogle-chromescaling

解决方案

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

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

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

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

推荐阅读