应查 caniuse.com 确认兼容性，对不支持浏览器用 html5shiv 注册标签、手动 polyfill API，并针对 Safari 等差异显式设置 CSS、避免伪元素依赖，关键交互须 JS 主动控制。
HTML 标签在不同浏览器里不渲染或行为不一致怎么办
不是标签写错了，而是某些标签从一开始就没被所有浏览器支持，或者支持方式有分歧。比如 <dialog> 在 Chrome 100+ 才稳定支持，Firefox 直到 99 版才加，Safari 则拖到 15.4 —— 这意味着你直接用，旧版 Safari 用户看到的可能只是个普通 <div>。
- 先查
caniuse.com，输标签名（如dialog、details），看「Global support」柱状图和下面的「Notes」，重点关注「Partial support」里的限制条件 - 不要只看「Yes/No」，比如
<input type="date">在 Safari 上点开是原生选择器，但在旧 Edge 里会退化成文本框——这不算 bug，是规范允许的降级行为 - 对关键交互标签（如
<dialog>），必须配showModal()调用，不能只靠 HTML 属性；否则 Firefox 可能不触发模态遮罩
遇到「这个标签 IE 完全不认识」该怎么补救
IE 不识别未知标签时，不会报错，但会拒绝解析其子节点、忽略 CSS 选择器（如 dialog { display: block } 不生效），本质是 DOM 构建失败。
- 用
document.createElement('dialog')在页面加载早期强制注册标签（哪怕只执行一次），IE8–11 就能正确解析并渲染 - 更省事的做法：引入
html5shiv.js，但它只解决「识别」，不解决「样式」和「API」——比如<dialog>的close()方法仍需 polyfill - 别用
document.write('<script>...</script>') 动态注入 shiv，IE9+ 已禁用该方式，改用appendChild
CSS 里用标签名选中元素，为什么 Safari 不生效
常见于自定义标签（如 <my-button>）或新语义标签（如 <article>），问题不在 CSS 本身，而在浏览器是否把该标签当作「合法元素」参与样式计算。
- Safari 对未声明的自定义元素默认设为
display: inline，且不继承父级font-size等属性，需显式写my-button { display: inline-block; font-size: inherit } -
<main>在 Safari 8–10 中不支持main { display: block }，得加main:not([hidden]) { display: block }这种 hack 绕过解析缺陷 - 避免用
dialog::backdrop做遮罩层样式——Firefox 和 Chrome 支持，但 Safari 目前完全忽略该伪元素，必须用 JS 插入额外<div class="backdrop">
要不要用 Web Components 自定义标签来统一跨浏览器行为
可以，但代价明显：自定义标签本身依赖 customElements.define()，而 IE 完全不支持，Edge 17–18 需要 webcomponentsjs polyfill，且 polyfill 会显著拖慢首屏解析速度。
立即学习“前端免费学习笔记（深入）”；
- 如果项目必须兼容 IE11，就别碰
class MyButton extends HTMLElement，老实用<button class="my-button">+ BEM 类名 - 若只支持 Chrome/Firefox/Safari 最新版，用
define()是干净方案，但注意：Safari 对shadowRoot的slotchange事件触发时机和 Chrome 不一致，监听时得加防抖 - 所有自定义标签的 attribute 变更都得手动监听
attributeChangedCallback，浏览器不会自动响应 —— 比如改了disabled属性，不写逻辑的话内部按钮根本不会变灰
最麻烦的从来不是「哪个标签能用」，而是「同一个标签，在不同浏览器里到底算不算‘已激活’状态」——比如 <dialog open> 在 Chrome 里打开即聚焦，在 Firefox 里得手动 dialog.focus()，Safari 则可能焦点跑到 body 上。这种细节，文档不写，只能实测。
