盒子里的绝对定位元素发生像素偏移的解决方法
本文讨论了在不同分辨率下，盒子中绝对定位元素意外像素偏移的问题。在自定义输入框复选框样式中，我们希望复选框居中，但它却会在不同分辨率下出现偏移。
问题分析
问题源于使用像素单位 (px) 来设置位置。在不同分辨率下，像素点的大小不同，这会导致 元素的实际位置发生变化。
解决方案
为了解决这个问题，建议使用相对单位 (rem、em) 来替代像素单位。相对单位相对于根元素 (html) 的字体大小，因此不会随着分辨率 而改变。
更新后的代码
.clause-content {
display: flex;
flex-direction: row;
align-items: start;
}
.clause-input {
display: inline-block;
vertical-align: middle;
width: 1rem;
height: 1rem;
cursor: pointer;
position: relative;
background-color: #fff;
margin-right: 0.8rem;
border: 0.1rem solid rgba(237, 30, 14, 0.15);
}
.clause-input input {
opacity: 0;
}
.clause-input input:checked + i {
width: 0.6rem;
height: 0.6rem;
position: absolute;
left: 50%;
top: 50%;
margin-left: -0.3rem;
margin-top: -0.3rem;
background-color: #ED1C24;
}通过将 px 单位替换为 rem 单位，确保了绝对定位元素在不同分辨率下都能正确居中。
