Html 使用rem元素的奇怪行为具有不同的高度

我正在将html字体大小设置为视口宽度单位。然后我用rem单位设置div的高度。当点击不同的视口宽度时，即使rem单位相同，元素的高度也不相同

例如：

html{
字体大小：1.3vw；
}
div{
利润率：10px；
宽度：100px；
高度：0.2rem；
背景：红色；
}

亚像素rendring@TemaniAfif关心explain@TemaniAfif这并不能解释为什么浏览器会对完全相同的元素使用不同的值，该元素具有完全相同的rem单元，并且没有包装器约束。如果浏览器必须四舍五入像素的百分比，那么它不应该四舍五入到每个元素的相同数字吗？它不是同一个元素，它们是两个具有相同属性的不同元素，这并不意味着它们一定会渲染相同的内容。它们没有放置在相同的位置，将以不同的顺序绘制，等等。因此它们比您认为的更加不同，这似乎足以让浏览器以不同的方式渲染它们。