HTML5shiv 是一个 JavaScript 库，用于在 IE8 及更早版本中支持 HTML5 语义标签；它通过动态创建元素并添加 CSS 规则，使旧版 IE 能识别、渲染 、 等标签，并确保 DOM 操作有效。
HTML5shiv 是什么，为什么旧版 IE 需要它
IE8 及更早版本根本不认识 <section></section>、<article></article> 这类 HTML5 语义标签，直接当未知元素处理——不渲染、无默认样式、JS 里 document.createElement('section') 也拿不到有效节点。HTML5shiv 就是干这个的：在 IE
它不修复 CSS3 属性（比如 border-radius），也不补 DOM API（比如 querySelector），只解决“标签能被识别”这一层问题。
怎么引入 HTML5shiv 才真正生效
必须满足两个硬条件，缺一不可：
- 只在 IE
-
<script></script>必须放在里，且在所有 CSS 之前——否则 CSS 里写的article { display: block; }会因标签未注册而失效 - 别用
async或defer，HTML5shiv 需要同步执行才能赶在样式解析前注册标签
常见错误现象和对应排查点
页面还是白屏/样式错乱？大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 用了
html5shiv.js但没加条件注释 → 其他浏览器也会执行，虽不报错但多一次无意义请求 - 把 script 放在
底部 → IE 已经解析完 DOM，再注册标签为时已晚 - CDN 地址写错或失效（比如旧版链接
https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js已 404）→ 检查控制台是否有Failed to load resource错误 - 用了 Webpack/Vite 等构建工具却直接
import 'html5shiv'→ 它不是标准模块，需通过script标签注入，或手动调用html5shiv(document)
替代方案和现实取舍
HTML5shiv 本身很小（min 版约 4KB），但如果你只用少量语义标签，其实可以手写等效逻辑：
document.createElement('header');
document.createElement('nav');
document.createElement('section');
// ……再加一句 CSS：article,section,header{display:block}
不过真这么干要注意：
- 必须在所有样式表加载前执行，顺序比引入库还难控
- 漏写一个标签（比如
main），对应区域就可能塌陷 - IE8 不支持
getElementsByClassName，如果后续 JS 依赖它，光靠 HTML5shiv 解决不了
所以除非项目明确限定只支持 IE9+，否则 HTML5shiv 仍是最快兜底的选择。真正的麻烦不在它，而在那些没被 shim 的 CSS3 特性或现代 JS API——那得另配 respond.js 或 es5-shim。
