IE8及更早版本不识别HTML5语义标签，因其DOM解析器忽略未知标签名，导致元素不存在、CSS无法匹配、JS查询返回null；必须在<head>最顶部用document.createElement提前声明所有新标签并配合display:block样式重置。
IE8 及更早版本压根不识别 <header>、<nav>、<section> 这类标签——它们在 DOM 里不存在，CSS 选不到，document.getElementById 或 querySelector 全部返回 null。不是样式没生效，是浏览器根本“看不见”。
为什么 document.createElement 必须在 <head> 最顶部执行
旧 IE（尤其是 IE8）解析 HTML 时，遇到不认识的标签会直接跳过创建 DOM 节点。必须在它开始解析页面主体前，就让引擎“记住”这些标签名是合法的。否则，哪怕后面 JS 再调用 document.createElement('article')，已渲染的 <article> 元素也早已被忽略，无法补救。
- 必须放在
<head>内第一个<script>，不能等DOMContentLoaded或window.onload - 推荐写法：
['header','nav','article','section','aside','footer','main','figure','figcaption','time'].forEach(function(tag) { document.createElement(tag); }); - 漏掉
main很常见——IE11 以下也不认识它，但很多项目只注册了基础六种
html5shiv 和手写脚本哪个更可靠
html5shiv 不只是调用 document.createElement，它还注入了一组关键 CSS：article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }。只靠 JS 声明标签，IE8 仍默认给它们设 display: inline，导致布局全乱。
- CDN 地址建议用：
https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js（比 cdnjs 更稳定） - 必须配合条件注释使用：
<!--[if lt IE 9]><script src="..."></script><![endif]-->，避免现代浏览器加载无用脚本 - 如果内网环境或担心 CDN 失效，手写三行更可控：
if (!document.createElement('header').nodeName) { ['header','nav',...].forEach(...); }+ 内联一段<style>
光有语义标签还不够：CSS 和 JS 的连带问题
即使标签能被识别、样式能生效，旧浏览器对现代 CSS 和 DOM API 的支持仍是断层。比如 querySelector 在 IE7 完全不可用，flexbox 在 IE10–IE11 用的是过时语法，localStorage 在 IE7 及以下要降级为 userData 行为。
立即学习“前端免费学习笔记（深入）”；
- CSS 选择器别只写
header { ... }，加一层 class 回退：.header, header { ... } - JS 操作语义标签前，先检测是否存在：
if ('querySelector' in document)，否则用getElementsByTagName或getElementsByClassName - 打印样式也要兼容：IE 下需额外引入
html5shiv-printshiv.js，否则@media print里语义标签仍不显示
真正麻烦的不是标签本身，而是整个渲染链路的断裂：HTML 解析 → CSS 匹配 → DOM 构建 → JS 执行 → 样式重绘。每个环节在 IE8 下都可能卡住，而开发者最容易忽略的是「CSS 加载时机」和「JS 执行顺序」这两个隐性依赖。
