html5在ie8及以下原生不支持语义化标签和部分表单特性，需html5shiv强制注册标签并配合display:block样式，且必须配合正确doctype、加载顺序及额外polyfill才能实现兼容。
HTML5 在 IE8 及以下版本中**原生完全不支持语义化标签**（如 <header></header>、<section></section>、<nav></nav>），也不会识别 type="email"、placeholder 等表单特性。这不是“部分不兼容”，而是 DOM 解析层就失败——IE8 会把 <article></article> 当作未知内联节点，既不生成块级渲染盒，也不响应 CSS 选择器。
为什么 html5shiv 是必须的（且不能只靠 CSS）
很多人以为加一句 header { display: block } 就能解决，但在 IE8 中这行 CSS 根本不会生效：浏览器压根没把 <header></header> 解析成合法元素，CSS 引擎直接跳过该选择器。html5shiv 的核心作用是调用 document.createElement('header') 等一系列操作，强制 IE “注册”这些标签名，使其进入 DOM 构建流程，之后 CSS 才有机会匹配。
- 仅在 IE9 以下生效，现代浏览器无需加载
- 必须放在
中、所有 CSS 和 JS 之前（否则样式可能已解析失败） - 推荐使用 CDN 上的稳定版本，避免本地路径出错：
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
- 条件注释
[if lt IE 9]在 IE10+ 和非 IE 浏览器中会被完全忽略，安全无副作用
CSS 必须补全 display:block（但仅限 IE8 及以下）
即使 html5shiv 让 IE 创建了元素，它默认仍按“未知标签”规则处理为 inline，所以必须显式声明块级行为。这个 CSS 要写在全局样式表中，且需覆盖所有常见语义标签：
header, nav, section, article, aside, footer, main, figure, figcaption, hgroup, details, summary {
display: block;
}
- 不要漏掉
hgroup、summary等冷门但实际存在的标签 - 避免用通配符（如
*{display:block}），会破坏所有内联元素（<span></span>、<a></a>等） - 如果项目用了 Normalize.css，它不包含这些规则，仍需手动补充
表单控件和属性需要单独 polyfill
html5shiv 只管标签识别，对 required、placeholder、type="date" 等毫无作用。这些需额外处理：
立即学习“前端免费学习笔记（深入）”；
-
placeholder：用jquery-placeholder或更轻量的原生方案（如监听focus/blur模拟） -
required：必须手写 JS 表单校验逻辑，IE8 不支持checkValidity()API -
type="date"：检测后降级为type="text"，并集成日期选择器（如 jQuery UI Datepicker） - 检测方式要可靠：
var input = document.createElement('input'); input.type = 'date'; if (input.type !== 'date') { // 降级逻辑 }
容易被忽略的坑：DOCTYPE 和怪异模式
即使加了 html5shiv，如果页面没有正确 DOCTYPE，IE 会进入“怪异模式（Quirks Mode）”，此时 html5shiv 失效，所有兼容性努力归零。
- 必须使用标准 HTML5 声明：
<!DOCTYPE html>
- 该声明前**不能有任何字符**（包括空格、BOM、注释），否则触发怪异模式
- 检查方法：在 IE8 开发者工具中看文档模式是否为 “IE8 标准模式” 或更高
- 服务器返回的 Content-Type 若缺少
charset=utf-8，也可能导致解析异常，建议显式声明
真正麻烦的不是加几行代码，而是这些补丁之间存在依赖顺序：DOCTYPE → html5shiv → 语义标签 CSS → 表单 polyfill。任意一环错位（比如 CSS 放在 html5shiv 前面），就会出现“标签可见但样式丢失”或“JS 报 undefined”这类静默失败。上线前务必用真 IE8 虚拟机或 BrowserStack 实测首屏渲染与表单交互。
