小数像素不是“算错”，而是渲染阶段被截断；浏览器layout阶段计算出0.7px等值，但光栅化时需映射到物理像素网格，经dpr换算后四舍五入导致视觉偏移，常见于相邻拼接、伪元素边框及transform与百分比混用场景。
小数像素不是“算错”，是渲染阶段被截断
浏览器在 layout 阶段确实会按 CSS 计算出 0.7px、42.3px 这类值，但真正画到屏幕上时，必须映射到物理像素网格。当设备像素比（DPR）为 3，而 1rem = 6.4px，那么 0.1rem = 0.64px → 对应 1.92 个物理像素 → 浏览器只能四舍五入成 2 或 1 个物理像素。这种截断不发生在计算层，而在光栅化前，所以你查 getBoundingClientRect() 看到的仍是 42.3，但视觉上已偏移。
边框错位最常出现在这三类地方
不是所有小数像素都会暴露问题，以下场景对 sub-pixel 最敏感：
- 相邻元素拼接处：比如两个
width: 50%的卡片并排，各自带border-bottom: 0.5px，一个被舍入为1px，另一个为0px，底部线就断开 - 伪元素模拟边框：
::after { height: 0.5px; background: #ccc; }在 iOS Safari 上直接渲染为不可见 - transform + 百分比混合使用：例如
top: 50%; transform: translateY(-50%);，若容器高为84.6px，-50% 就是-42.3px，两次 sub-pixel 截断叠加后偏移放大
为什么 box-sizing: border-box 不能解决小数边框错位
box-sizing 只影响 width/height 的尺寸归属逻辑，它不干预像素渲染精度。即使你写 width: 100px; border: 0.5px solid #000; 并设了 border-box，总宽仍是 100px，但那 0.5px 边框本身仍要面对 DPR 映射和舍入——它只是没把边框“撑出去”，但边框自己还是可能消失或模糊。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真正起作用的是：
- 用
transform: scaleY(0.5)配合1px元素生成视觉0.5px，走合成层，精度可控 - 用
clamp(12px, 13.333vw, 16px)锁死根字号下限，确保1rem ≥ 12px，让0.1rem ≥ 1.2px，避开亚像素临界区 - 避免在缩放（zoom）场景下依赖浮动+百分比，因为缩放会放大已有 sub-pixel 误差，而不是重算布局
别信“加负 margin 盖住缝隙”这种解法
写 margin-bottom: -0.3px 看似能对齐，但它参与 layout 阶段，照样被舍入；而且这个值只在当前 DPR 和缩放比例下有效。用户开系统「更大字体」、切横屏、换设备，缝隙可能变成重叠或更大缺口。这不是修复，是把问题从视觉层挪到更难调试的时机层。
最易被忽略的一点：这类错位在 Chrome DevTools 的 device toolbar 里能稳定复现，但很多人只在真机上测——结果上线后 iOS 用户集中反馈边框断开，才发现 clamp() 没生效、伪元素没设 transform-origin: 0 0、或者全局 box-sizing 被某个 !important 覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
