IE8无法识别HTML5新标签，因其解析器将未知标签视为inline元素且不创建可样式化DOM节点；须用html5shiv通过document.createElement()注册标签，并显式设置display:block等样式。
IE8 不支持 HTML5 新标签，、 等会被当成未知元素，既不渲染为块级，也无法应用 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 做了深度适配。
- 不要用 CDN 上的
html5shim拼写错误版本（注意是shiv，不是shim） - 脚本必须放在
内、任何 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 就以为万事大吉，但实际项目中常踩这几个坑：
- 条件注释
