必须手动加降级方案，因为CSS Anchor Positioning在Firefox中尚未稳定支持，且浏览器兼容性、锚点可见性、命名合规性任一环节失效都会导致anchor()静默退化为普通absolute定位，需在渲染前通过CSS.supports、anchorName属性及元素可见性三重检查并注入JS fallback逻辑。
为什么必须手动加降级方案
截至2026年7月，CSS Anchor Positioning 仅在 Chrome 125+、Edge 125+ 和 Safari 17.5+ 中稳定支持，Firefox 仍处于实现阶段，且所有浏览器都要求锚点元素可见、定位有效、命名合规——任意一环出错，anchor() 就静默失效，目标元素退回到普通 position: absolute 行为（即相对于最近定位祖先，而非你期望的触发器）。它不报错、不警告，只“假装没看见”，这是最危险的降级场景。
JS fallback 的核心检查点
不能等用户点击后再补救，得在渲染前就判断是否可用，并提前注入备用逻辑。关键检查项包括：
-
CSS.supports('anchor-name', 'test')—— 判断浏览器是否识别该属性（注意：Chrome 125+ 支持，但旧版 Chrome 或未开启 flag 时返回false） -
getComputedStyle(anchorEl).anchorName是否为非空字符串（验证锚点元素是否真正被解析） -
anchorEl.offsetParent !== null && !anchorEl.hidden && getComputedStyle(anchorEl).display !== 'none'—— 确保锚点元素物理可见且参与布局
三者缺一不可。只查 CSS.supports 会漏掉隐藏锚点导致的错位；只查可见性又会忽略 Safari 17.4 等不支持该特性的旧版本。
降级时如何复用同一套 DOM 结构
避免写两套 HTML，用 class 控制行为分支：
立即学习“前端免费学习笔记（深入）”；
- 给锚定元素加
class="js-tooltip-fallback"，并在 JS 中统一监听mouseenter/click触发定位计算 - 用
getBoundingClientRect()获取锚点位置，再结合window.scrollY和window.innerWidth计算安全区域 - 把计算结果写入内联
style：element.style.top = `${top}px`，而不是依赖 CSS 类——否则容易和原生 anchor 规则冲突 - 对翻转逻辑（如底部空间不足时改到上方），不要硬编码阈值，用
Math.min和Math.max动态比对视口边界
特别注意：降级 JS 必须在 DOMContentLoaded 后立即执行，不能等到事件触发才初始化，否则首次悬停会出现闪动或错位。
样式层兜底的常见陷阱
很多人试图用 @supports not (anchor-name: --x) 写 fallback 样式，但这行不通：
-
@supports无法检测anchor()函数是否被实际解析（函数调用失败是运行时行为，不是语法支持问题） -
anchor-name属性本身可能被识别，但anchor(--x top)在不支持浏览器里直接被丢弃，不触发任何 fallback 回退机制 - 更稳妥的做法是：默认关闭所有 anchor 相关 CSS，仅当 JS 确认支持后，再动态插入
<style>块启用anchor()规则
真正起作用的永远是 JS 主导的开关逻辑，CSS 只负责呈现，不负责决策。
