HTML定位本身不涉及精度问题，所谓“精度问题”实为JavaScript操作坐标或CSS动态赋值时受子像素渲染、devicePixelRatio等因素影响所致。
HTML定位本身不涉及精度问题
浏览器渲染HTML时，position 属性（如 static、relative、absolute、fixed）只决定元素的布局行为和参考坐标系，不参与数值计算精度控制。所谓“精度问题”，通常是你在用 JavaScript 操作 offsetTop、getBoundingClientRect() 或 CSS top/left 动态赋值时，遭遇了小数像素、四舍五入、子像素渲染或设备像素比（window.devicePixelRatio）带来的视觉偏差。
getBoundingClientRect() 返回的小数是正常现象
这个 API 返回的 top、left 等值常带小数（如 12.345），尤其在缩放、高清屏或字体抗锯齿开启时。这不是 bug，而是浏览器为保持布局平滑做的子像素对齐。
- 直接用该值设置
style.left = rect.left + 'px'可能导致轻微抖动或错位 - 若需像素级稳定，可四舍五入：
Math.round(rect.left)，但要注意：强制取整可能在动画中造成卡顿 - 更稳妥的做法是使用
transform: translate()替代top/left，它天然支持亚像素，且由 GPU 加速
CSS 中 top/left 的 0.5px 在某些场景会模糊
当给一个非 transform 定位的元素设 top: 0.5px，在非整数 DPR 设备（如 DPR=2.25 的 Surface Laptop）上，浏览器可能无法精确映射到物理像素，表现为边缘发虚或文字轻微模糊。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 避免对文本容器或边框敏感的元素使用小数
top/left - 检查是否意外触发了 subpixel rendering：用
outline: 1px solid red叠加观察实际渲染边界 - 如需微调对齐，优先用
transform: translateY(0.5px)，它不改变文档流，也不影响其他元素布局
JavaScript 动态定位时容易忽略 devicePixelRatio
当你用 getBoundingClientRect() 获取位置后，再通过 canvas 绘图或 SVG 定位做关联，若没考虑 window.devicePixelRatio，坐标就会偏移——比如在 Mac Retina 屏上，getBoundingClientRect().left 是逻辑像素，而 canvas 像素是物理像素。
立即学习“前端免费学习笔记（深入）”；
- Canvas 绘图前记得缩放：
ctx.scale(dpr, dpr)，并把 DOM 坐标除以dpr再传入 - SVG 的
getScreenCTM()返回矩阵已含 DPR 影响，直接用它转换更可靠 - 不要假设
offsetLeft和getBoundingClientRect().left总是相等——前者受border、padding和scroll影响，后者是视口绝对坐标
/dpr 或多套了一层 transform，就足以让定位漂移 1–2 像素——这种偏差在设计稿里看不出来，一上真机就明显。 
