ie8及以下不解析html5语义标签，因解析器直接丢弃未知标签导致dom无节点；必须用html5shiv 3.7.3版配合条件注释提前注册标签并设display:block，否则css和js均失效。
IE8 及以下版本根本不会解析 <header></header>、<nav></nav>、<section></section> 这类标签——不是样式错乱，是 DOM 里压根没节点，document.getElementById 都取不到。
IE8 及以下不识别 HTML5 语义标签的实质原因
老 IE 把未知标签当“无效元素”直接跳过解析，既不生成 DOM 节点，也不触发 CSS 渲染。这不是 display 样式问题，而是从解析层就丢弃了。所以光写 header { display: block } 完全无效。
- 必须先让浏览器“知道”这些标签名存在，才能进入后续样式和脚本处理流程
-
document.createElement('header')的作用就是向 IE 的标签白名单里手动注册一个名字 - 这个动作必须在页面开始解析 HTML 前完成（即放在
最顶部）
html5shiv 是什么，为什么必须用 3.7.3 版本
html5shiv 就是一段自动帮你批量执行 document.createElement + 设置 display: block 的脚本。但它只对 IE9 及以下生效，IE10+ 和现代浏览器完全忽略它。
- 别用 CDN 上的 3.8+ 版本：新版对 IE6 兼容性反而退化，政企内网仍有不少 IE6 环境
- 必须配合条件注释加载：
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 如果页面需要打印，还得额外加
html5shiv-printshiv.js，否则 IE 打印时语义标签照样失效
CSS 中为语义标签设 display: block 不能省略
即使引入了 html5shiv，IE9–IE11 仍会把 <section></section> 当作 inline 元素处理，导致布局塌陷、margin 不生效等现象。
- 必须显式声明：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 这条规则要放在所有自定义 CSS 之前，否则可能被覆盖
- 不要只写
header, nav—— 漏掉main或section在 IE11 下就会出视觉错位
更稳妥的降级方案：条件注释直接切回 div
如果你的项目必须长期支持 IE8 且对 JS 加载时机敏感（比如首屏依赖 DOM 结构），用 html5shiv 反而增加不确定性。这时直接降级更可控。
- 用条件注释分离结构：
<!--[if lt IE 9]><div class="header">...</div><![endif]-->+<!--[if gte IE 9]><header>...</header><![endif]--> - 所有样式统一走 class，避免在 CSS 里混用
header和.header选择器 - JS 操作也统一用
document.querySelector('.header')，不依赖标签名
真正容易被忽略的是：就算你把 html5shiv、CSS 重置、条件注释全配齐，只要 前面多了一个空格或 BOM 字节，IE 立刻进怪异模式——这时候所有兼容补丁都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
