IE9–IE11原生不识别HTML5语义标签，需用html5shiv通过document.createElement注册标签并配合CSS显式设display:block；IE8及以下会忽略标签仅保留文本；IE10+虽支持标签但Flex/Grid兼容性差，须加前缀或降级处理。
IE 浏览器（尤其是 IE9–IE11）原生不识别 HTML5 新增语义化标签（如 、、 等），直接渲染时会当作未知元素，不应用 CSS 样式，也不参与标准盒模型布局，页面必然错乱。
为什么 IE8 及更早版本完全不显示 HTML5 标签
IE8 及以下版本的 DOM 解析器遇到不认识的标签名，会直接忽略其开始/结束标签，只把内部文本内容提升到父级。比如：
标题
在 IE8 中等价于：
标题
导致样式丢失、结构坍塌、JS 查询不到 document.querySelector('header') 等问题。
立即学习“前端免费学习笔记（深入）”；
解决核心是让 IE “认识”这些标签——即通过 document.createElement() 提前注册，使其进入内建标签白名单。
用 html5shiv 让 IE 支持 HTML5 语义标签
html5shiv 是最成熟、轻量（仅约 4KB）、被 Bootstrap 等主流框架长期采用的兼容方案。它只在 IE 条件注释中加载，不影响现代浏览器。
- 必须放在
内，且在所有 CSS 和 JS 之前 - 仅对 IE9 及以下生效；IE10+ 已原生支持大部分语义标签（但部分如
仍不支持） - 需配合
css中显式声明display: block才能正确布局（html5shiv 不自动加样式）
典型引入方式：
IE 下 CSS 中必须显式设置 display 属性
即使 html5shiv 注册了标签，IE 仍默认将它们视为 inline 元素（类似 ），不会自动设为 block。若 CSS 里没写：
header, nav, section, article, aside, footer { display: block; }
就会出现文字挤成一行、margin/padding 失效、浮动失效等“错乱”现象。
建议在 reset 或基础样式开头统一处理：
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
IE10+ 的坑：flexbox 和 grid 布局支持不完整
IE10–IE11 虽支持 HTML5 标签，但对现代布局特性支持极差：
-
display: flex需加-ms-前缀，且不支持flex-wrap: wrap-reverse、align-content等属性 -
display: grid在 IE10–IE11 中是旧版实现（2011 年草案），语法完全不同（如用display: -ms-grid），与现代 Grid 完全不兼容 - 媒体查询中
min-width在某些 IE 版本下对rem单位解析异常，建议降级为px
若项目必须支持 IE，建议放弃 Grid，Flexbox 也严格限制用法，优先使用 float + BFC 或 table-cell 模拟布局。
真正麻烦的不是加 html5shiv，而是后续所有 CSS 和 JS 都得按“IE 思维”重审一遍：是否用了它不认的单位、函数或 API；是否假设了某个元素一定存在；是否依赖了现代事件机制（如 addEventListener 在 IE8 是 attachEvent）。兼容性从来不是加个脚本就完事的事。
