17370845950

IE8及更早版本不识别HTML5语义标签，需用html5shiv声明元素并CSS设display:block；localStorage和querySelector等API需降级为userData或DOM方法模拟；禁用flex/grid、ES6语法及现代CSS函数，并添加X-UA-Compatible声明防怪异模式。

HTML5 标签在 IE8 及更早版本直接不识别怎么办

IE8 及以下版本根本不认识

、、

这类语义化标签，会把它们当普通未知元素处理，既不渲染样式，也无法被 CSS 选中（除非用 document.createElement() 提前声明）。

最直接的解法是引入 html5shiv —— 它不是 polyfill 库，而是一段极小的 JS，只做一件事：让老 IE 知道这些新标签是合法元素。

• 必须放在 中，且在任何 CSS 引入之前执行
• 只对 IE浏览器跳过，所以可放心加条件注释
• CDN 地址推荐用 https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js

CSS 中用 display: block 补齐 IE8 的默认渲染缺失

即使 html5shiv 让标签“存在”了，IE8 仍不会给 、 等元素设默认 display 值，结果就是它们表现得像 ——行内、不换行、无视宽高。

必须手动重置：

• 在 CSS 文件顶部或 reset 区域统一加：article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
• 不要只写部分标签，漏掉
  或
  就可能出布局错位
• 如果用了 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 解析器就会中断执行，后续逻辑全挂
• 忘了设置 ？IE8 可能触发怪异模式（Quirks Mode），连盒模型都算错

老浏览器兼容不是加几个库就能一劳永逸的事，本质是约束开发边界：哪些新特性敢用，哪些必须手写降级，哪些干脆放弃支持。最省心的方案，往往是先明确最低支持版本（比如 IE9+），再决定要不要投入人力兜底 IE8。