<分区>
html - CSS 和 rem : changing the html font-size creates inconsistent dimensions
我在我的所有元素中都使用 rems 来计算字体大小和元素尺寸。基本 html 字体大小曾经设置为 10px。当我出于设计原因更改为 11 时，我注意到高度为 .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 高度线:
发生这种情况是否有原因，是否有解决方法？
谢谢!
最佳答案
可能是浏览器渲染问题。
你可以尝试用边框代替div的高度。
例子:
border-bottom: 0.2rem solid purple;
关于html - CSS 和 rem : changing the html font-size creates inconsistent dimensions，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51649784/