IE8及更老浏览器不识别HTML5语义标签，需用document.createElement()声明并设display:block；功能标签需polyfill；html5shiv仅解决标签识别，CSS须用class选择器；JS需转译+运行时polyfill。
HTML5新标签在IE8及更老浏览器里直接报错？别用，得降级
IE8及以下（尤其是IE6/7）根本不认识 <header>、<nav>、<section> 这类语义化标签——它们不是“显示异常”，而是压根不解析，DOM里没有对应节点，CSS也选不到。
最稳妥的做法是：老项目必须支持IE8时，放弃原生HTML5语义标签，统一用 <div class="header"> 替代；若已有代码含HTML5标签，必须配合 document.createElement() 声明，否则JS操作会失败。
- IE6–8需在
<head>中提前执行：document.createElement('header'); document.createElement('nav'); // ……每个要用的HTML5标签都列一遍 - 仅声明还不够：CSS里必须显式设
display: block，因为老IE默认把未知标签当inline元素处理 - 像
<video>、<canvas>这类功能型标签，无法靠createElement拯救，必须用 polyfill（如flashcanvas、html5media）或彻底降级为<object>/<embed>
用 html5shiv 是不是一劳永逸？只对IE9以下有效
html5shiv 的本质就是自动帮你批量执行 document.createElement() + 重置样式，但它只解决“识别”问题，不解决“功能”问题。
它只在 IE9 及以下生效（通过条件注释加载），IE10+ 和所有现代浏览器完全忽略它。如果你在全局脚本里无差别引入，反而增加不必要的HTTP请求和执行开销。
立即学习“前端免费学习笔记（深入）”；
- 正确加载方式（仅限旧IE）：
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
- 不要用 CDN 上的最新版（如 3.8+），3.7.3 是兼容性最稳的版本；新版对 IE6 支持反而退化
- 它不能修复
<input type="date">在IE中的缺失——这类表单增强仍需单独 polyfill（如webshim）
CSS 里用 HTML5 标签做选择器，老IE照样不认
即使你用 html5shiv 让标签被创建出来，如果 CSS 写成 header { margin: 1em; }，IE8 依然无视——它不认识这个选择器类型。
必须改用 class 选择器，或确保所有样式规则都兼容 CSS2.1 语法。
- 错误写法：
nav ul { list-style: none; } - 正确写法：
.nav ul { list-style: none; }（并把 HTML 改为<div class="nav"><ul>…</ul></div>） - 避免使用子选择器
>以外的复杂组合（如section + article），IE7 对相邻兄弟选择器支持不稳定 - 媒体查询（
@media）在 IE8 及以下完全不支持，必须用respond.js补充，且只对 CSS 文件生效，不支持<style>块内嵌写法
现代构建工具（Vite/Webpack）默认不处理老IE，得手动关特性
Vite 默认输出 ES2015+ 语法，Webpack 5 默认不转译 node_modules 中的代码——这意味着哪怕你写了兼容HTML结构，打包后的 JS 仍可能含 const、箭头函数、Promise，直接让 IE9 崩溃。
不是加个 html5shiv 就能跨时代，JS 层的兼容才是真门槛。
- Vite 用户必须配置：
build: { target: 'ie11', // 或 'es2015'，不能用 'modules' polyfillDynamicImports: true } - Webpack 需明确启用
babel-loader并设置targets: { ie: '11' }，同时用@babel/polyfill（或更轻量的core-js/stable）补全 API - 注意：
fetch、Array.from、Object.assign等高频API，即使语法转译了，行为仍需 polyfill，漏掉一个就可能白屏
Promise.allSettled 这种方法在 IE 里根本不存在，不手动 polyfill 就会静默失败。 
