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

Question

我在我的所有项目中都使用 rems 来计算字体大小和元素尺寸。基本 html 字体大小过去设置为 10 像素。当我出于设计原因更改为 11 时，我注意到 0.2rem 高度的重复行显示不一致。这是一个可以重现该问题的代码笔： https ://codepen.io/jalef/pen/djeoxK 。如果 html 字体大小从 10 更改为 11，则会发生同样的事情。

html {
  font-size: 11px;
}

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

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

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

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

谢谢！

标签： htmlcss

Answer 1

可能是存在一些浏览器渲染问题。

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

例子：

border-bottom: 0.2rem solid purple;