round()函数在主流浏览器中均不支持，写left: round(12.3px, 1px)会被直接忽略；真正有效的亚像素对齐需用calc()避小数、js取整、translatez(0)触发合成层或改用vh/vw单位。
round() 函数在当前所有主流浏览器的稳定版本中均不支持——写 left: round(12.3px, 1px) 会被直接忽略，不会生效，也无法解决高清屏下的亚像素偏移问题。
为什么 round() 不是解决方案
所谓 CSS round() 是 CSS Values and Units Level 4 规范中的实验性提案，Chrome 自 117 起曾短暂启用过部分实现，但已回退；Safari 16.4+ 仅支持极有限上下文（如 font-size），且未开放给 top/left/transform 等布局属性。MDN 明确标注其兼容性为「No support」。误信该函数会导致样式静默失效，排查困难。
真正起效的亚像素对齐方法
高清屏（dpr > 1）下 fixed 元素模糊或错位，本质是浏览器将 top: 12.3px 渲染在非整数物理像素位置。解决核心是让最终参与渲染的值为整数像素：
- 用
calc()避开小数：比如left: calc(100px + 1rem)（确保1rem是整数 px） - 对 JS 动态计算的值强制取整：
el.style.left = Math.round(x) + 'px'，别用offsetLeft - 用
transform: translateZ(0)触发合成层，部分缓解模糊（不治本，但见效快） - 关键定位属性（
top/left/width）全部改用vh/vw或百分比，并确保父容器尺寸稳定（如height: 100vh）
移动端 fixed 偏移的干扰源常被忽略
iOS Safari 在横屏、键盘弹出、地址栏收起时会动态重设视口高度，但 position: fixed 锚点不会自动更新。此时看到的“偏移”不是 CSS 错了，而是：
-
viewport缺initial-scale=1.0或maximum-scale=1.0，导致初始缩放错乱 - 任意祖先元素含
transform、opacity: 0.99、filter，悄悄创建新包含块，使 fixed 相对于父容器而非视口 - 未适配安全区域：
bottom: calc(16px + env(safe-area-inset-bottom))比单纯bottom: 16px更可靠
最易被跳过的一步：打开 Chrome DevTools 的「Layers」面板，勾选「Layer borders」，一眼就能看出哪些元素意外成了 stacking context —— 这比反复检查 CSS 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
