IE8及更早版本不识别HTML5语义标签，需用html5shiv声明元素并CSS设display:block；localStorage和querySelector等API需降级为userData或DOM方法模拟；禁用flex/grid、ES6语法及现代CSS函数，并添加X-UA-Compatible声明防怪异模式。
HTML5 标签在 IE8 及更早版本直接不识别怎么办
IE8 及以下版本根本不认识 <header>、<nav>、<section> 这类语义化标签，会把它们当普通未知元素处理，既不渲染样式，也无法被 CSS 选中（除非用 document.createElement() 提前声明）。
最直接的解法是引入 html5shiv —— 它不是 polyfill 库，而是一段极小的 JS，只做一件事：让老 IE 知道这些新标签是合法元素。
- 必须放在
<head>中，且在任何 CSS 引入之前执行 - 只对 IE<9 生效，其他浏览器跳过，所以可放心加条件注释
- CDN 地址推荐用
https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js
<!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <![endif]-->
CSS 中用 display: block 补齐 IE8 的默认渲染缺失
即使 html5shiv 让标签“存在”了，IE8 仍不会给 <article>、<aside> 等元素设默认 display 值，结果就是它们表现得像 <span>——行内、不换行、无视宽高。
必须手动重置：
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 文件顶部或 reset 区域统一加：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 不要只写部分标签，漏掉
<main>或<details>就可能出布局错位 - 如果用了 PostCSS 或 Autoprefixer，注意它们默认不处理 HTML5 标签的 display 补丁，得自己写
localStorage、querySelector 这类 API 在 IE7/8 怎么 fallback
HTML5 静态页若依赖脚本交互（比如记住用户偏好、动态筛选列表），遇到 IE7/8 就会报 Object doesn't support property or method 'querySelector' 或 'localStorage' 错误。
不能指望全局 polyfill 库（如 core-js）——它太重，且静态页通常没构建流程。务实做法是按需补丁：
-
querySelector/querySelectorAll：用document.getElementById+getElementsByTagName组合模拟，或引入轻量sizzle.js（jQuery 的选择器引擎，仅 10KB） -
localStorage：降级到userData行为（IE5.5+ 支持），封装一层兼容函数，读写都走它；或者干脆 fallback 到cookie（注意大小限制 4KB） - 避免用
addEventListener：老 IE 只认attachEvent，简单封装一个on(el, type, fn)函数即可
为什么加了兼容代码，IE8 还显示空白或错位
常见真凶不是 HTML5 标签本身，而是现代开发习惯埋的雷：
- 用了
flexbox或grid布局？IE8 完全不支持，连display: flex都会忽略整条规则，导致子元素堆叠失效 - CSS 里写了
rgba()、hsl()或calc()？IE8 只认十六进制色值和固定像素，calc(100% - 20px)直接被丢弃 - JS 文件用了 ES6 语法（如箭头函数、
const）？哪怕只有一行，IE8 解析器就会中断执行，后续逻辑全挂 - 忘了设置
<meta http-equiv="X-UA-Compatible" content="IE=edge">？IE8 可能触发怪异模式（Quirks Mode），连盒模型都算错
老浏览器兼容不是加几个库就能一劳永逸的事，本质是约束开发边界：哪些新特性敢用，哪些必须手写降级，哪些干脆放弃支持。最省心的方案，往往是先明确最低支持版本（比如 IE9+），再决定要不要投入人力兜底 IE8。
