IE8及以下不识别HTML5标签，因Trident引擎仅支持HTML4/XHTML1元素，需用html5shiv.js通过document.createElement注册标签并注入display:block样式。
IE8及以下根本不认识 <header> 这类标签
不是样式没生效，是浏览器压根不解析这些标签——DOM里没有对应节点，CSS选择器匹配失败，document.querySelector('header') 返回 null。这是底层解析器限制，不是写错 CSS 或 JS 就能绕过的。
- IE6–IE8 使用旧版 Trident 渲染引擎，HTML 解析器只认 XHTML 1.0 / HTML 4.01 的元素列表
-
<section>、<nav>、<aside>等在 IE8 中等同于未知自定义标签，被当作<span>处理（即默认行内、无盒模型、无法设宽高） - 即使你写了
header { display: block; }，也无效——因为浏览器根本没把<header>当成合法元素，CSS 规则压根不参与匹配
最简可行方案：用 html5shiv.js + 条件注释
这是经过十多年验证、零配置、最小侵入的解法。它本质是提前调用 document.createElement() 把所有 HTML5 标签“注册”进 DOM，让 IE 认可它们为合法元素，之后 CSS 才能生效。
<!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <![endif]-->
- 必须放在
<head>内，且要在任何 CSS 和 JS 之前加载（否则样式/脚本可能已执行完毕） - 用
<!--[if lt IE 9]>包裹，确保仅 IE8 及更低版本加载，现代浏览器完全忽略 - 推荐使用 jsDelivr CDN（比老的 googlecode / bootcss 更稳定），避免因资源不可用导致白屏
- 无需额外写
display: block—— html5shiv 已内置该样式补丁
手动创建元素也能行，但别在页面里硬写
原理相同：调用 document.createElement() 强制注册标签。但直接在 HTML 中逐个写 document.createElement('nav') 是反模式。
- 每个新标签都要单独调用一次，维护成本高；漏一个，那个标签就失效
- 必须确保 JS 在 DOM 解析前执行（比如放在
<head>里并加defer），否则<nav>元素已解析完毕，再创建已无意义 - 更糟的是：如果用户禁用 JS，整个结构塌陷，而 html5shiv 至少是“有 JS 才启用”的合理依赖
真要手写，统一收口成 IIFE 即可：
立即学习“前端免费学习笔记（深入）”；
<script>
(function() {
var tags = 'header nav section article aside footer hgroup figure figcaption'.split(' ');
for (var i = 0; i < tags.length; i++) {
document.createElement(tags[i]);
}
})()
</script>CSS 层面必须补 display: block 吗？
对 html5shiv 来说：不用。它内部已注入基础样式表，包含 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; }。
- 但如果你用的是极简版 polyfill（比如只调
createElement），或用了某些精简版 shim，就必须自己补 - 注意：IE8 不支持 CSS3 选择器如
:nth-child，所以不要在兼容层依赖这类规则 - 别用
* { display: block; }暴力覆盖——会破坏<span>、<a>等原有行内语义
真正容易被忽略的点是：html5shiv 只解决“标签识别”，不解决“CSS3 属性”（如 flex、border-radius）。这些得靠 Modernizr + 降级样式，或直接放弃支持。
