根本原因是html { font-size }被缩得太小导致1rem跌破1px，浏览器四舍五入或亚像素插值造成对不齐而漏背景；clamp()设最小值（如12px）可守住1rem下限，使0.1rem≥1.2px，控住精度误差。
为什么rem计算出小数px会漏背景色
根本不是浏览器算错，而是html { font-size }被缩得太小，导致1rem对应的实际像素跌破1px。比如设计稿按375px基准、设font-size: 10px，在240px宽设备上实际算出font-size: 6.4px——此时0.1rem = 0.64px，浏览器只能四舍五入或亚像素插值，相邻元素边缘就对不齐，露出底层背景。
这种缝隙常见于：卡片列表底部、tab切换线、轮播指示器、伪元素边框拼接处。它不是“bug”，是渲染管线对 subpixel 的被动截断。
- 别指望
calc()能绕过：哪怕写height: calc(100% - 0.5px)，布局阶段仍会被舍入 - rem本身不产生误差，误差来自根字号动态缩放时没设下限
- 问题在iOS Safari和Chrome on Android上最明显，尤其DPR=2/3设备
用transform: translateY()微调位置避坑
当容器高度或top值算出来是42.3px这类带小数时，直接加margin-top: -0.3px无效（margin参与layout，照样被舍入），但transform: translateY(-0.3px)可以真正生效——它走合成层，精度到0.1px。
- 必须用
transform，不能混用top或margin：比如同时写top: 20px; transform: translateY(-0.3px)，先整数layout再微调，缝隙照旧 - 伪元素做边框时，
transform-origin要设为0 0，否则缩放后位置偏移不可控 - 若已用
top: 50%; transform: translateY(-50%)居中，额外微调请合并进同一个transform：写成transform: translateY(calc(-50% - 0.3px))，避免双重subpixel累积
clamp()守住1rem下限比JS动态改更稳
很多人用JS监听window.innerWidth然后手动改:root的font-size，但JS执行时机晚、易触发重排、且无法响应系统缩放变化。而clamp()是CSS原生能力，浏览器在样式计算阶段就完成插值，更轻量也更准。
- 最小值必须用
px单位：clamp(12px, 13.333vw, 16px)，不能写clamp(0.75rem, ...)，否则又陷入基准漂移 - vw系数要重算：750px设计稿对应100px，换算系数是
100 / 750 × 100 = 13.333，不是随便抄个2.5vw - 别在
@media里再套clamp()：媒体查询静态，clamp()本身已具备连续响应能力
负margin遮盖缝隙只是临时补丁
看到缝隙就加margin-bottom: -1px看似快，但它是“以错掩错”：当前屏刚好盖住，换DPR或缩放比例就可能过盖或欠盖，维护成本高，也不可预测。
- 仅限紧急上线救火，不能作为通用方案
- 如果用了
box-sizing: border-box，负margin可能把border一起拉变形，需配合overflow: hidden兜底 - 真正要解决，得回到根字号控制或用transform做视觉对齐，而不是靠“多盖一点”来蒙混
最常被忽略的一点：所有这些方案的前提，是你得确认缝隙真是由rem小数引起的——先用DevTools选中元素，看Computed面板里height、top、border-top-width这些值是不是带小数。不是所有缝隙都该用transform修，有些是box-sizing没设对，或是gap和padding叠加导致的视觉重复。定位清楚再动手，比堆技巧更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
