IE8无法识别HTML5新标签，因其解析器将未知标签视为inline元素且不创建可样式化DOM节点；须用html5shiv通过document.createElement()注册标签，并显式设置display:block等样式。
IE8 不支持 HTML5 新标签，<header>、<section>、<nav> 等会被当成未知元素，既不渲染为块级，也无法应用 CSS 样式——这不是“样式没写对”，而是 DOM 根本没识别它。
为什么 IE8 无法识别 HTML5 标签
IE8 及更早版本的解析器遇到未声明的标签时，会默认将其视为 inline 元素，并拒绝为其创建可样式化的 DOM 节点。这意味着即使你写了 header { display: block; }，浏览器也压根不认这个 header 是个合法标签，CSS 规则直接被忽略。
- 不是 CSS 优先级问题，是选择器根本匹配不到元素
-
document.querySelector('header')在 IE8 中返回null - 浮动、盒模型、伪类（如
header::before）全部失效
必须用 html5shiv（或等效脚本）动态创建标签
核心动作是让 IE8 “知道”这些标签存在，本质是调用 document.createElement() 提前注册它们。推荐使用标准 html5shiv，它已针对 IE6–8 做了深度适配。
<!-- 仅在 IE9 以下加载 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <![endif]-->
- 不要用 CDN 上的
html5shim拼写错误版本（注意是shiv，不是shim） - 脚本必须放在
<head>内、任何 CSS 和自定义 JS 之前 - 不支持通过
defer或async加载，否则 DOM 创建时机错乱
CSS 必须显式声明 display: block
即使 html5shiv 成功注册了标签，IE8 仍默认按 inline 渲染。所有语义化标签需统一重置：
立即学习“前端免费学习笔记（深入）”；
header, nav, section, article, aside, footer, main, figure, figcaption {
display: block;
margin: 0;
padding: 0;
}- 别只写
header，漏掉main或figure就可能在某处突然塌陷 - 避免用通配符如
* { display: block; }，会破坏表单控件、图片等原生行为 - 如果用了
box-sizing: border-box，记得也加到这些标签上，否则 IE8 下宽高计算异常
兼容性处理容易被忽略的细节
很多人加了 html5shiv 和 CSS 就以为万事大吉，但实际项目中常踩这几个坑：
- 条件注释
<!--[if lt IE 9]>在 IE10+ 和标准模式下完全不执行，没问题；但在 IE9 的兼容模式（EmulateIE7/8）下仍会触发，要留意是否多加载了一次 - 若页面用了
XMLHttpRequest或其他 HTML5 API（如localStorage），html5shiv 不负责这些——得单独引入json2.js、respond.js等 polyfill - 服务端若启用了 HTTP/2 或强制 HTTPS，某些老旧 CDN（如早期 Google Code）的 html5shiv 地址可能已不可用，建议本地托管或换用 jsDelivr
真正上线前，务必在真实 IE8 虚拟机（非 IE 开发者工具的模拟模式）里打开控制台，检查 document.createElement('section') 是否返回元素对象，再验证样式是否生效——模拟器骗不了人。
