IE8及更早版本不识别HTML5语义标签，需在head中用document.createElement预注册并设display:block；推荐用html5shiv或手动注册全部标签+CSS回退，兼顾JS/CSS兼容性。
IE8 及更早版本根本不会把 <header>、<nav>、<section> 这类标签当“元素”看——它们在 DOM 里不存在，CSS 选不到，JS 查不到，连 document.getElementById 都返回 null。这不是样式没生效，是浏览器压根没解析它。
必须在 <head> 最顶部声明标签
旧 IE 解析 HTML 时，遇到不认识的标签名会直接跳过，不创建 DOM 节点。必须在它开始渲染页面前，就让它“记住”这些名字是合法的。所以 document.createElement 要放在 <head> 里第一个 <script> 中，不能等 DOMContentLoaded 或 window.onload。
- 推荐一次性注册全部常用标签：
['header','nav','article','section','aside','footer','main','figure','figcaption','time'].forEach(tag => document.createElement(tag)); - 漏掉
main很常见，但 IE11 以下也不认识它，建议一并加入 - 只写
document.createElement('header')不够，必须覆盖所有实际用到的标签
光声明还不够：得强制设 display: block
即使标签被识别了，IE8 默认仍把它当 inline 元素处理，导致布局错乱。比如 <section> 不自动换行，margin/padding 失效。
- html5shiv 内部不仅调用
createElement，还会注入关键 CSS：article, aside, footer, header, nav, section { display: block; } - 如果不用 html5shiv，需手动加
<style>块或确保对应 class 规则（如.section { display: block; }）同时生效 - 注意：这个样式必须在 IE8 渲染前加载，否则无效
别只靠标签名写 CSS 和 JS
即使 html5shiv 加载成功，老浏览器对现代语法的支持仍是断层，得做双重保障。
立即学习“前端免费学习笔记（深入）”；
- CSS 选择器别只写
header { }，改用.header, header { }，让 class 成为 fallback - JS 操作前先检测能力：
if ('querySelector' in document) { ... } else { ...getElementsByClassName... } - 打印样式要额外引入
html5shiv-printshiv.js，否则@media print里语义标签仍不显示
实在没法兼容时，降级比硬撑更稳妥
如果项目明确要求支持 IE6–8，且维护成本敏感，直接用语义化 class 替代原生标签反而更可靠。
- 例如：
<div class="header">...而不是<header>... - 这样既保留结构语义（可通过 ARIA 属性补充），又避开 DOM 解析和样式链路的所有断裂点
- 后续升级时，只需批量替换 class 为标签，无需重构逻辑
