CSS和Rem：更改html字体大小会导致尺寸不一致

Question

我在整个项目中都使用rems来计算字体大小和元素尺寸。基本的html字体大小曾经设置为10px。当我出于设计原因而更改为11时，我注意到重复显示的.2rem高度行并不一致。这是可以重现该问题的Codepen：https://codepen.io/jalef/pen/djeoxK。如果html字体大小从10更改为11，则会发生相同的情况。

html {
  font-size: 11px;
}

.line {
  height: .2rem;
  width: 50rem;
  background-color: purple;
  margin: 1rem;
}

将html字体大小设置为10px时产生的一致的.2rem高度线：

将html font-size设置为11px时产生的不一致的.2rem高度线：

是否有发生这种情况的原因，有办法解决吗？

谢谢！

Answer 1

可能是某些浏览器渲染问题。

您可以尝试使用边框代替div的高度。

示例：

border-bottom: 0.2rem solid purple;