旧节点兼容性必须从HTML结构源头控制：DOCTYPE须独占首行无BOM，html5shiv需在CSS前加载并配合display:block重置语义标签，且须用htmlhint等工具校验结构合规性。
旧节点兼容性不是靠“加个 polyfill 就完事”，而是要从 HTML 结构源头控制——如果 <header> 在 IE8 里被当作文本节点解析，后续所有样式和脚本都失效，再好的 JS 兼容层也救不回来。
DOCTYPE 必须独占首行且无 BOM
这是所有兼容问题的开关。IE 和旧 Edge 遇到任何前置字符（空格、<!-- 注释 -->、UTF-8 BOM、PHP 输出空白），立刻进 Quirks Mode：盒模型错乱、float 行为异常、font-size 计算失准。
- 验证方式：Chrome DevTools Elements 面板顶部显示
Standards才算成功；若显示Quirks，必须回查源码第一行 - 构建时用
html-validate或 CI 脚本检查首行合规性，比人工更可靠 - 服务端模板（如 PHP、Nunjucks）需确保
<!DOCTYPE html>是输出流第一个字节
HTML5 语义标签必须配合 html5shiv + display 重置
IE8 不识别 <nav>、<main> 等标签，不是样式问题，是 DOM 解析阶段就跳过——仅靠 CSS display: block 无效，因为样式规则根本匹配不到这些“不存在”的元素。
-
html5shiv必须放在<head>内，且在所有<link rel="stylesheet">之前加载 - 推荐条件加载：
<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><![endif]--> - CSS 文件顶部必须显式声明：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }，漏掉任何一个，对应区域可能塌陷
HTMLHint 强制校验基础结构合规性
人工检查容易遗漏细节，htmlhint 可在提交前拦截常见破坏兼容性的写法。
立即学习“前端免费学习笔记（深入）”；
- 关键规则必须启用：
doctype-first（检查 DOCTYPE 是否首行）、doctype-html5（强制<!DOCTYPE html>）、html-lang-require（防止屏幕阅读器解析异常）、tag-pair（避免未闭合标签导致 IE 渲染中断） - 配置示例：
{ "doctype-first": true, "doctype-html5": true, "html-lang-require": true, "tag-pair": true, "attr-lowercase": true, "attr-no-duplication": true } - 搭配
husky+lint-staged，在pre-commit阶段自动运行：htmlhint "**/*.html"，不合规则直接阻断提交
渐进增强必须从 HTML 层开始，而非 JS 或 CSS
所谓“平滑升级”，本质是让旧节点能跑通最小可用路径：纯 HTML 能展示核心内容 → 加 CSS 后布局可读 → 加 JS 后交互增强。不能把功能强耦合在某个 API 上。
- 表单提交必须支持原生
<form method="POST">提交，JS 增强只是可选覆盖 - 导航链接用标准
<a href="/about">，而不是全靠router.push()；JS 失效时用户仍可跳转 - 媒体内容必须提供降级路径：
<video>内嵌<p>您的浏览器不支持视频，请<a href="video.mp4">下载</a></p> - 避免在 HTML 中依赖现代属性：比如不用
loading="lazy"作为图片加载前提，旧浏览器会静默忽略，但不应因此丢失图片
最容易被忽略的是：旧节点兼容性不是“前端工程化做完就结束”的事，它要求每次新增一个 <dialog> 或改一个 <main> 的时候，都得同步确认 html5shiv 是否覆盖、CSS 是否重置、htmlhint 是否报错——结构层的微小松动，在 IE8 里就是整块页面的崩塌。
