子像素渲染导致的1px缝隙是浏览器将小数像素映射到整数物理像素时的舍入误差，并非CSS错误；可通过开启Rasterization Borders确认，优先用calc()替代小数百分比，并用伪元素绘制精准1物理像素线覆盖缝隙。
子像素渲染导致的 1px 缝隙不是 bug，是浏览器把小数像素（如 250.37px）映射到整数物理像素时的舍入误差。它在 Safari 最明显，缩放窗口或切换设备像素比（window.devicePixelRatio）时缝隙会移动甚至消失——这说明问题出在光栅化层，而非 CSS 写错了。
检查是否真有缝隙，还是 sub-pixel 渲染假象
先别急着加 margin-right: -1px 或 transform。打开 Chrome 或 Safari DevTools → Elements 面板 → 右键元素 → “Show Rasterization Borders”。如果看到半透明描边，就确认是 sub-pixel 渲染激活了；此时所谓“缝隙”大概率是插值露白，不是真实空白。
- 用
getComputedStyle(el).width查真实计算值，看是不是非整数（如"499.999px"） - 禁用系统字体缩放（iOS「更大字体」、Windows 缩放设置），否则
font-size: 16px可能被渲染成18.2px，连带影响行高和对齐 - 浮动布局中，检查所有元素的
height、line-height、font-size是否全为整数（20px，非20.5px）
用 calc() 替代小数百分比，避免浮点累积误差
写 width: 33.333% 看似方便，但 CSS 解析器会保留浮点误差，多列相加后总宽常略小于 100%。改用 calc() 让浏览器在运行时做精确除法，再配合 box-sizing: border-box 控制容错。
- 三列布局：写
width: calc(100% / 3)，别写33.333% - 有 padding 的父容器：若
padding: 12px，子项不能只写width: 50%，得写width: calc(50% - 12px) - 两列留边框空间：推荐
width: calc(50% - 1px)+margin-right: 1px，末项margin-right: 0，比负边距更可控
伪元素绘制物理像素线，不干扰原始盒模型
想“填满”缝隙又不敢动 margin 或 float？用 ::after 在交界处画一条精准落到 1 物理像素的色块，视觉上覆盖缝隙，且完全不参与布局计算。
- 父元素必须设
position: relative，否则伪元素脱标到body - 伪元素用
height: 1px+background-color，别用border-bottom（受line-height和box-sizing干扰） - 四边边框时，伪元素设
width: 200%; height: 200%; box-sizing: border-box;，再transform: scale(0.5)，锚点写死transform-origin: 0 0 - 滚动容器中边框消失？加
transform: translateZ(0)或will-change: transform强制图层提升
最常被忽略的一点：缝隙往往藏在 computed 样式里——border、padding、line-height 看似正常，但组合后因 sub-pixel 舍入产生偏差。与其反复试错，不如先开 Rasterization Borders 确认问题类型，再选 calc() 或伪元素方案。后者虽稍重，但它是目前唯一能稳定控制物理像素渲染的通用解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
