优先使用兼容性好的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实际抓包验证，别只信本地开发环境的输出
