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中的文字大小相同，为什么线条的宽度呈现不同？

我在某些网站上看到设置字体大小：100％。作为一个好的做法，我应该设置这个吗？

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

Answer 1

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

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

另外，请考虑different browsers round numbers differently。

这一事实

Answer 2

通常注意到的是，如果边框宽度为＆lt; = 1px，最好将其设为1px。因为rem会使它成为一个非常小的值。某些浏览器不会呈现此值。