CSS Anchor Positioning浏览器不兼容如何降级

Chrome 125+/Edge 125+ 仅支持 CSS Anchor Positioning，需手动开启实验标志；Safari/Firefox 完全不解析 anchor() 函数，静默忽略整条声明，无 fallback 机制，必须用 JS 运行时检测与定位兜底。

Chrome 125+ 才支持，Safari/Firefox 完全不认

CSS Anchor Positioning 不是“写了就能用”的特性。截至 2026 年 8 月，它仅在 Chrome 125+ 和 Edge 125+ 中可用，且必须手动开启 chrome://flags/#anchor-positioning 实验标志；Safari 和 Firefox 当前版本（包括 Safari 17.6、Firefox 128）完全不解析 anchor() 函数——连语法错误都不会报，直接静默忽略整条声明。

这意味着：如果你只写 top: anchor(--trigger top);，Safari 用户看到的是 top: auto（即默认定位），元素大概率会错位或消失。别指望浏览器自动 fallback，它根本没看见那行代码。

1. 检测方式不是靠 @supports (anchor-name: --x) —— 这个语法无效，@supports 不识别 anchor-name 属性
2. 真正能测的只有 JS：CSS.supports('position: absolute; top: anchor(--x top)')，但 IE11 和旧 WebView 里 CSS.supports 本身就不存，需先判空
3. 最稳妥的运行时检测是：创建一个带 anchor-name 的临时元素，再用 getComputedStyle 读取其 anchorName（注意大小写），但需确保 DOM 已挂载

anchor-name 写错就彻底失效

anchor-name 不是 ID，也不是 class，它是严格受限的 CSS 自定义标识符：必须以 -- 开头、不能含数字开头、不能有大写字母混用（--TooltipAnchor ≠ --tooltipanchor）、不能重复、不能设在 display: none 或 visibility: hidden 元素上。

常见错误：

1. 写成 id="trigger" 然后在 CSS 里用 anchor(#trigger top) —— 浏览器直接跳过，不报错
2. 把 anchor-name: --tip; 写在 .trigger { display: none; } 上 —— 锚点被注销，anchor() 返回 0px
3. 多个元素都设 anchor-name: --menu; —— 只有第一个生效，其余锚点不可用
4. 用在 position: static 元素上 —— 大部分浏览器忽略该声明，锚点形同虚设

target 元素必须是 absolute/fixed，且 anchor() 只能用于特定属性

anchor() 不是通用函数，它只被 top、right、bottom、left、inset-block-start、inset-inline-end、translate（注意：仅限数值部分，不是整个 transform）等可计算长度的属性识别。

以下全是无效写法，不会报错但也不起作用：

1. margin-top: anchor(--trigger top);（margin 不接受 anchor()）
2. width: anchor-size(--trigger width); 写在 max-width 里（anchor-size() 只支持 width、height、min-width 等明确尺寸属性）
3. top: anchor(--trigger top) + 8px;（不支持运算，必须拆成 top: anchor(--trigger top); margin-top: 8px;）
4. position: relative; top: anchor(--trigger top);（position: relative 下 anchor() 被静默丢弃）

正确姿势：目标元素必须设 position: absolute 或 position: fixed，且只在允许的属性中调用 anchor()。

JS fallback 是唯一靠谱的兜底方案

别依赖 @supports 做降级 —— 它无法检测 anchor() 支持性，且 IE 完全不解析该规则。真正可行的是 JS 运行时接管：

1. 用 IntersectionObserver 监听锚点元素是否可见，避免滚动时位置漂移
2. 用 getBoundingClientRect() 手动计算位置，兼容所有浏览器（包括 IE11）
3. 关键逻辑封装成函数，例如：positionTooltip(anchorEl, tooltipEl, { side: 'bottom', offset: 8 })
4. 通过 class 切换控制样式：默认用 JS 定位，支持 Anchor 的环境再用 CSS 覆盖（.supports-anchor .tooltip { position: absolute; top: anchor(--x top); }）

复杂点不在 JS 逻辑本身，而在「何时触发重定位」：锚点元素动态显示/隐藏、父容器 transform、视口缩放变化时，CSS 原生能自动响应，JS 必须手动监听并 re-calculate —— 这是降级成本最高的地方。