优先使用兼容性好的 HTML 标签如 <div>、<span>、<section>、<article>，避免 <dialog>、<details> 等新标签及 inert 属性；CSS 中慎用 display: contents 和旧版 Safari 的 flex 布局，需配 fallback 确保降级可用。
HTML 标签和属性哪些能放心用
不是所有标准里的 HTML 标签，浏览器都支持得一样好。比如 <dialog> 在 Chrome 里早就能用，但 Safari 直到 15.4 才开始支持，而且默认没样式；<details> 和 <summary> 在 IE 里完全不识别，会直接当普通容器渲染。
实际做法是：查 caniuse.com 看目标浏览器版本覆盖率，再决定是否用原生标签。如果要兼容 IE11 或老版 Safari，就别碰 <dialog>、<time>（语义化但无渲染意义）、inert 属性这些——它们要么被忽略，要么触发解析错误。
- 优先用稳定十年以上的标签：
<div>、<span>、<section>、<article>（语义清晰且渲染一致） - 避免在 IE 中依赖
contenteditable的细节行为，它在 IE 里光标定位、回车处理和焦点管理都和现代浏览器不一致 -
<picture>+<source>是响应式图片的推荐写法，但需配<img>作 fallback，否则老浏览器连图都不显示
CSS 影响 HTML 渲染的兼容陷阱
HTML 本身不渲染，真正出问题的往往是 CSS 把 HTML“搞没了”。比如 display: contents 让父元素不参与盒模型，但 Firefox 63+ 才支持，IE 全系不支持——用了它，整个结构在 IE 里就塌了，还不好排查。
另一个典型是 flex 容器里的 <input>，在旧版 Safari（
立即学习 “ 前端免费学习笔记（深入）”；
- 慎用
all: unset或all: revert，它们在 Safari 9.1–13.1 中行为不稳定，可能让<button>失去可点击态 -
<select>的size属性在 Chrome/Firefox 中表现一致，但在 Edge Legacy 里会强制显示滚动条，即使选项不够多 - 用
appearance: none隐藏原生控件样式时，记得手动补cursor: pointer和outline，否则在 Firefox 中可能失去焦点反馈
JavaScript 操作 DOM 时 HTML 结构的隐性依赖
JS 常假设 HTML 结构“按预期存在”，但跨浏览器下，DOM 解析可能有细微差异。比如 document.createElement('main') 在 IE11 中创建的是未知元素，typeof mainElement === 'object' 是 true，但它没有默认样式、也不被querySelector('main') 匹配到——除非你提前用 document.createElement('main')“注册”过。
还有 innerHTML 写入含自闭合标签的字符串，像 '<img src=x><input type=hidden>'，在 IE 里会自动补全成 <input type=hidden></input>，导致后续 querySelector('input') 拿到两个节点。
- 动态插入 HTML 前，先用
DOMParser解析校验（现代浏览器），或改用document.createElement+appendChild组装，避开解析歧义 - 不要依赖
element.children.length判断是否有子元素——IE11 会把文本节点间的空白算进childNodes，但不进children，而 Chrome/Firefox 更严格 - 用
insertAdjacentHTML替代innerHTML +=，后者会销毁已绑定事件，且在旧浏览器中更容易触发重排失控
DOCTYPE 和字符编码声明必须手写，不能靠工具生成
很多构建工具或编辑器模板会默认加 <!DOCTYPE html>，但如果你用 Webpack + HTML 插件注入内容，有可能在最终输出里漏掉它，或者变成 <!doctype html>（小写）。IE8 及以下看到小写的 DOCTYPE，会直接进 Quirks Mode，连 getBoundingClientRect 都返回错值。
同样，<meta charset="utf-8"> 必须放在 <head> 最前面，哪怕只差一个注释位置，某些旧版 Android WebView 就会乱码，且无法通过 HTTP 头覆盖修复。
- 检查最终 HTML 源码第一行是不是严格
<!DOCTYPE html>（大小写敏感、无空格、无 BOM） -
<meta charset>前不能有任何非空格、非注释内容，包括服务器注入的调试信息或 CDN 缓存标记 - 用
curl -s your-site.com | head -n 5实际抓包验证，别只信本地开发环境的输出
