旧版IE（IE8及以下）不识别HTML5语义标签，需用html5shiv.js通过document.createElement和display:block修复；它仅对IE
HTML5 标签在旧版 IE（如 IE8 及以下）直接不渲染怎么办
旧版 ie（特别是 ie6–ie8）根本不认识 <section></section>、<header></header>、<nav></nav> 这类 html5 语义标签，会把它们当普通未知元素处理：默认不设样式、不参与文档流、display 是 inline，导致布局塌陷或内容消失。
核心解法不是“升级浏览器”——用户不能强制换 IE，而是让老浏览器「知道这些标签可以像 div 一样用」：
- 用
document.createElement()主动声明每个 HTML5 标签（如document.createElement('header')），IE8 及以下才肯把它当合法元素解析 - 配合 CSS 强制设
display: block（否则即使创建了，仍按 inline 渲染） - 推荐直接引入
html5shiv.js（轻量脚本，仅对 IE - 必须放在
中、CSS 之前加载，否则样式可能因 DOM 解析顺序错乱
为什么用 html5shiv 而不是自己写 createElement
自己手写容易漏标签、顺序错、没覆盖条件判断。比如 IE9+ 已原生支持 HTML5 标签，但若脚本无版本检测，反而会干扰正常行为；再比如 <video></video> 和 <audio></audio> 在 IE8 不仅不识别，还可能触发 JS 错误。
html5shiv 的关键优势是精准控制生效范围：
- 只在
document.documentMode 时执行，避免污染现代浏览器 - 预定义了全部 8 个常用 HTML5 块级标签（
article、aside、details、figcaption、figure、footer、header、main、nav、section、summary、time） - 自动注入
display: block规则到页面样式表，无需额外写 CSS
用法极简：
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
IE8 下 CSS 选择器对 HTML5 标签失效的连带问题
即使用了 html5shiv，如果 CSS 写成 header { color: red; }，IE8 依然可能不生效——因为它不支持「未知标签名」作为选择器。
立即学习“前端免费学习笔记（深入）”；
根本原因是 IE8 的 CSS 解析器遇到不认识的标签名，整条规则会被直接丢弃（不是忽略某条声明，是整条规则跳过）。
- 必须确保所有 HTML5 标签名选择器都搭配 class 或 id 使用，例如
.header或#main-header，避开纯标签选择器 - 不要依赖
section > p这类组合，改用.section-content > p - 如果必须保留语义化结构，可用
html5shiv-printshiv.js（增强版），它额外修补了 CSS 选择器解析逻辑
现代项目里还要不要管 IE8 兼容
要看实际用户环境。如果后台系统、内网办公场景仍有大量 Win7 + IE8 终端，那就得保；但如果是面向公众的新网站，IE8 全球使用率已低于 0.1%，强行兼容反而增加维护成本和安全风险。
真正容易被忽略的是「渐进降级」的边界点：
-
html5shiv只解决标签识别，不提供<canvas></canvas>、<localstorage></localstorage>等 API 的 polyfill，这些需单独引入excanvas或store.js - Flexbox、Grid、
let/const等完全无法靠 shiv 补齐，必须用 Babel + Autoprefixer 构建时转译 - 哪怕加了所有 polyfill，IE8 的 DOM 操作性能也极差，复杂 SPA 几乎不可用
所以别只盯着标签能不能显示，先确认业务逻辑是否真能在 IE8 上跑通——很多时候，问题不在「怎么让 header 显示出来」，而在「点按钮后那段 JS 根本没执行」。
