html - 0.1 rem border-width 在 chrome 和 safari 上呈现不同

Question

在我的应用程序中，我正在设置:

html {
    font-family: 'Source Sans Pro',"Helvetica Neue",sans-serif;
}

我将边框宽度设置为 0.1rem，现在我注意到在 Chrome 中将宽度设置为 1.6px，在 Safari 中将其设置为 1px。

Safari 和 Chrome 中的文本显示大小相同，为什么线条的宽度呈现不同？

我在一些网站上看到设置 font-size: 100%。作为一种好的做法，我应该设置这个吗？

还有一个问题。以这种方式用 rem 设置边框宽度对我来说是一种不好的做法吗？我使用的是 rem，因为应用程序中的所有内容都使用 rem，我希望保持不变。

Answer 1

如果您希望 rem 测量值与特定像素大小相关，那么您需要为 html< 的 font-size 属性指定该大小 标签。如果不这样做，rem 测量将相对于每个浏览器设置中指定的默认字体大小。

html{
    font-size:16px;
}
p{
    border-width:.1rem; /* =1.6px */
}

此外，请考虑 different browsers round numbers differently .