dialog标签在旧浏览器中功能完全缺失，必须用dialog-polyfill逐个注册且时机正确：dom就绪后、调用showmodal前，否则showmodal报错、backdrop不渲染、焦点失效。
dialog 标签在 IE 全系、Edge 18 及以下、Android WebView 旧版本中**根本不可用**——不是样式错乱，而是 showModal() 直接报 TypeError: dialog.showModal is not a function，::backdrop 完全不渲染，焦点管理彻底失效。
必须用 dialog-polyfill，别试 html5shiv 或纯 CSS 重置，它们对 dialog **完全无效**。
为什么 html5shiv 对 dialog 标签没用
html5shiv 只让 IE 知道 dialog 是个合法标签名，能进 DOM、能写 CSS 选中；但它不提供任何方法、不模拟 open 属性、不插入 backdrop、不劫持 ESC 键。即使你写了 dialog { display: block; }，调用 dialog.showModal() 依然会崩溃。
- 错误现象：
document.querySelector('dialog').showModal()在 IE11 控制台直接报错，页面静默失败 - 它不管表单
method="dialog"的自动关闭逻辑 - 它不处理模态堆叠、焦点锁定、返回触发元素等无障碍关键行为
- IE9+ 虽能解析
dialog标签，但 API 全是空的 —— 这不是“渲染问题”，是“功能缺失”
dialog-polyfill 必须执行的两步注册
只引入 JS/CSS 文件不够，必须手动注册每个 dialog 元素，且时机不能错。
- 在
中引入dialog-polyfill.css（提供.backdrop样式和定位） - 在 DOM 就绪后、首次调用
showModal()前，对每个dialog执行dialogPolyfill.registerDialog(d) - 错误写法：
<script>document.getElementById('myDialog').showModal()</script>—— 此时 polyfill 还没注册，方法不存在 - 正确时机：用
DOMContentLoaded或把 script 放在前
多个 dialog 元素必须逐个注册
页面里有 <dialog id="confirm"></dialog> 和 <dialog id="help"></dialog>？不能只注册第一个。漏掉任何一个，那个对话框就退化成普通 div，showModal() 报错、背景可点、ESC 失效。
- 推荐写法：
document.querySelectorAll('dialog').forEach(d => dialogPolyfill.registerDialog(d)) - 加防护：检查是否已注册，避免重复调用（虽不报错，但浪费）：
if (!d.hasAttribute('data-polyfilled')) { dialogPolyfill.registerDialog(d); d.setAttribute('data-polyfilled', 'true'); } - 动态插入的
dialog（如通过 JS 创建）必须在插入 DOM 后立刻注册，不能等到全局初始化时
polyfill 后的 backdrop 和焦点行为差异
原生 dialog 用 ::backdrop 伪元素，polyfill 用真实 DOM 节点 <div class="backdrop"> 插在 <code>dialog 同级、紧邻下方。这意味着：
- CSS 中不能写
dialog::backdrop，要改用.backdrop类选择器定制遮罩样式 - z-index 需手动控制：polyfill 默认给
.backdrop设z-index: 99999，dialog设z-index: 100000；若页面已有高 z-index 组件（如顶部导航），可能被盖住，需调整 - 焦点返回逻辑严格按规范：关闭后自动 focus 到触发按钮；若按钮已被移除或 disabled，polyfill 会 fallback 到
document.body，这点比手写模态框更可靠 - 键盘支持完整：ESC 关闭、Tab 锁定在对话框内、Shift+Tab 反向循环 —— 无需额外代码
