HTML新标签在低版本浏览器中会静默降级为未知元素，表现为样式失效、JS无法获取、querySelector返回null，或Elements面板显示为<unknown>，constructor.name为HTMLUnknownElement。
HTML 页面标签版本回退导致渲染异常怎么识别
浏览器不会报错说“你用了旧标签”，但会悄悄降级处理：比如把 <dialog> 当成普通 <div>，把 <time datetime="2024-01-01"> 的语义丢掉，甚至忽略 hidden 属性。最典型的信号是样式没生效、JS 无法获取元素、或者 document.querySelector('dialog') 返回 null —— 其实它在 DOM 里，只是被当成未知标签处理了。
- 检查控制台是否有
Unknown element <dialog>类似提示（部分 Chromium 版本会输出） - 在 Elements 面板里看该标签是否被渲染为
<dialog></dialog>，还是变成了<unknown></unknown> - 用
element.constructor.name判断：原生<dialog>对应HTMLDialogElement，回退后是HTMLUnknownElement
哪些 HTML 标签在低版本浏览器里容易“消失”或失效
不是所有新标签都一样脆弱。<dialog>、<details>、<summary>、<meter>、<progress> 这类语义化强但实现晚的标签，在 Safari 15.6 之前、Firefox 90 之前、Edge 90 之前都存在兼容断层；而 <main>、<section> 这类结构标签虽不带行为，但旧 IE 会丢失默认样式（需 CSS 重置）。
-
<dialog>：Safari 直到 15.4 才支持，且不支持showModal()方法 -
<input type="date">：在 iOS Safari 15.4 之前无原生控件，只显示文本框 -
<picture>+<source>：IE 完全不识别，必须 fallback 到<img>
不靠 polyfill 怎么安全降级使用新标签
polyfill 不是万能的，尤其对 <dialog> 这种需要接管模态栈、焦点管理、ESC 键逻辑的标签，轻量 polyfill 往往漏掉边界情况。更稳的做法是：用新标签写结构，但关键交互和样式不依赖其原生行为。
- 始终提供
role属性：比如<dialog role="dialog">，让旧浏览器至少理解语义 - CSS 中用
dialog:not([open]) { display: none; }替代仅靠open属性控制显隐 - JS 初始化时检测构造函数：
if ('showModal' in document.createElement('dialog')) { ... }，否则走自定义弹窗逻辑 - 对
<time>这类纯语义标签，保留datetime属性，但内容文本仍要可读（不能只靠属性）
本地开发时怎么快速模拟旧浏览器标签行为
别等上线才踩坑。Chrome DevTools 的 Rendering 设置里没有“禁用 HTML5 标签”选项，但可以手动触发降级效果：
立即学习“前端免费学习笔记（深入）”；
- 在控制台执行
document.createElement('dialog')后检查返回对象类型，对比目标浏览器文档 - 使用
userAgent模拟（如设为Safari/604.1），但注意 UA 伪装 ≠ 渲染引擎降级 - 更可靠的是在真实旧环境测试：用 BrowserStack 或本地安装 Safari 14、Firefox ESR 102
有些问题只在特定组合下暴露——比如 <dialog> 套 <form method="dialog"> 在 Safari 15.6 上能用，但加上 autofocus 就卡死。这种细节没法靠文档预判，只能在目标最小版本上跑通核心路径。
