tabindex兼容逻辑统一按dom顺序+语义规则处理，现代浏览器对"0"和"-1"行为一致；safari自ios 16.4起静默忽略正整数tabindex，因其违反wcag规范；focus({preventscroll:true})在safari中无效，需用scrollintoview替代；动态渲染中tabindex="-1"必须静态存在且聚焦时机需卡准。
tabindex 的兼容逻辑不是“适配不同浏览器”，而是统一按 DOM 顺序 + 语义规则处理，所有现代浏览器（包括 Safari 17+、Chrome 120+、Firefox 115+）对 tabindex="0" 和 tabindex="-1" 的行为已高度一致；真正不兼容的是你用错的正整数写法和缺失的配套逻辑。
为什么 Safari 对 tabindex="1" 完全无效
Safari 自 iOS 16.4 / macOS Ventura 起明确忽略所有正整数 tabindex 值（如 tabindex="1"、tabindex="99"），既不将其提前排序，也不报错，而是静默退回到 DOM 顺序。这不是 bug，是 Apple 对 WCAG 实践的主动收敛。
- 常见错误现象：开发时在 Chrome 看起来“第一个被 Tab 到”，上线后 Safari 用户直接跳过该元素
- 根本原因：Safari 认为正整数 tabindex 是反模式，拒绝参与其导致的焦点流断裂
- 解决方案：立刻删除所有
tabindex正数值，用tabindex="0"配合 DOM 位置表达意图
focus({preventScroll: true}) 在 Safari 中失效怎么办
该参数在 Safari 中始终被忽略，调用 element.focus({preventScroll: true}) 不会报错，但滚动仍会发生——这是已知限制，不能靠 try/catch 捕获。
- 实操建议：改用
element.focus()后立即调用element.scrollIntoView({ block: 'nearest', inline: 'nearest' }) - 更稳妥做法：先检查支持性：
if ('preventScroll' in FocusOptions.prototype)，否则走 fallback 流程 - 注意：若元素被
overflow: hidden或transform遮挡，scrollIntoView可能无效，需额外判断getBoundingClientRect().top是否在视口内
动态渲染组件中 tabindex="-1" 聚焦失败的常见原因
React/Vue 组件挂载后调用 .focus() 失败，90% 是因为目标元素还没真正插入 DOM，或没正确声明 tabindex="-1"。
-
tabindex="-1"必须在 HTML 字符串或 JSX 中**静态存在**，不能靠 JS 动态 setAttribute 添加——Safari 和部分旧版 Chrome 会忽略运行时注入的该属性 - 聚焦时机要卡准：用
requestAnimationFrame(() => element.focus())或setTimeout(() => element.focus(), 0)，确保渲染完成 - 别聚焦容器本身：比如模态框根节点设了
tabindex="-1"，但你想聚焦的是里面的<button></button>——应把tabindex="-1"放在那个 button 上
最易被忽略的点：键盘导航体验不取决于 tabindex 数值是否“整齐”，而取决于每次状态变化（展开/收起/切换/加载）后，焦点是否精准落在用户下一个**有明确操作预期**的元素上——这个落点必须提前用 tabindex="-1" 占位，且不能依赖 DOM 插入顺序去“猜”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
