ie8及以下浏览器完全不识别html5语义标签，必须用html5shiv调用document.createelement()注册标签并配合display:block样式重置，且doctype须首行无空格，css和js需按序加载并降级处理。
旧版浏览器（尤其是 IE8 及以下）对 HTML5 的支持是断裂式的，不是“部分不支持”，而是“根本不认识”。直接加 <header></header> 标签、用 localStorage 或 querySelector，在 IE8 里会静默失败或报错——这不是代码写错了，是环境压根没这个能力。必须从 DOM 解析起点开始干预。
DOCTYPE 必须首行无空格，否则整个页面进怪异模式
这是所有兼容问题的开关。IE 和旧 Edge 遇到非标准 DOCTYPE（比如前面有空格、BOM、注释或写成 ），立刻触发 Quirks Mode：盒模型变回 IE5.5 风格、<code>float 行为错乱、font-size 度量失准，后续所有 CSS 和 JS 都可能偏移。
- 验证方式：Chrome DevTools Elements 面板顶部显示 Standards 才算成功；若显示 Quirks，就得回查 HTML 源码第一行
必须独占第一行，前面不能有任何字符（包括 <code><!-- 注释 -->、PHP 输出空白、UTF-8 BOM）- 构建时用
html-validate或 CI 脚本检查首行合规性，比人工更可靠
html5shiv 必须在
IE8 不识别 <section></section> 这类标签，不是样式问题，是解析阶段就跳过，当未知 inline 元素处理。仅靠 CSS display: block 无效——因为样式规则根本匹配不到这些“不存在”的元素。
- 必须用
html5shiv主动调用document.createElement()，让 IE “注册”这些标签 - 加载位置必须在
内，且在任何<link rel="stylesheet">之前；否则 CSS 已解析完毕，再创建元素也来不及应用样式 - 推荐条件加载：
<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><![endif]-->
CSS 必须显式重置 HTML5 语义标签的 display 值
html5shiv 解决了“存在性”，但 IE8 仍不会给 <header></header>、<nav></nav> 等设默认 display，结果它们表现得像 <span></span>：不换行、无视 width/height、margin 失效。
- 必须在 CSS 文件顶部统一声明：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 漏掉任何一个（比如没写
main或details），对应区域就可能塌陷或错位 - 别依赖 PostCSS/Autoprefixer 自动补全——它们不处理 HTML5 标签的
display重置，得手动写
JS API 要按需降级，不能靠全局 polyfill 堆砌
静态页没构建流程，引入 core-js 这类大包反而拖慢首屏。务实做法是只补真正用到的 API：
-
querySelector/querySelectorAll：用document.getElementById+getElementsByTagName组合模拟，或轻量引入sizzle.js（jQuery 选择器引擎，仅 10KB） -
localStorage：IE7/8 优先降级到userData（需 XML 格式 + behavior 绑定），次选用cookie（注意 4KB 限制和每次请求发送） -
addEventListener：IE8/9 用attachEvent('onclick', handler)，注意事件名带on前缀，且this指向window
最容易被忽略的是：所有这些补丁都必须在 DOM ready 后执行，且不能假设 document.body 已存在——IE8 下脚本若放在 底部，可能 DOM 尚未完全解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
