html5在ie6–ie8中需通过html5 shiv声明语义标签、强制标准模式、重置display为block及最小化样式归一来实现兼容，不追求视觉一致而保障结构可用与内容可读。
HTML5 基础骨架本身轻量简洁，但老旧浏览器（尤其是 IE6–IE8）无法识别新语义标签（如 <header></header>、<nav></nav>、<section></section> 等），也不支持 HTML5 文档类型的部分解析逻辑。升级兼容性不是“加功能”，而是让老浏览器能正确创建、渲染和样式化这些元素。
补全语义标签的 DOM 识别能力
IE8 及更早版本遇到未知标签时，会忽略其闭合关系，导致 DOM 树断裂、CSS 无法生效。必须用 JavaScript 提前“声明”这些元素：
- 在
中引入 HTML5 Shiv（推荐使用 min 版本）：<!--[if lt IE 9]><br> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><br><![endif]-->
- 不依赖外部 CDN 时，可内联关键逻辑（适用于极简场景）：
<script>if(!document.createElement('header').canHaveChildren){document.createElement('header');document.createElement('nav');/* 列出所有用到的 HTML5 标签 */}</script> - 注意：仅声明不够，还需配合 CSS 设置
display: block—— 老 IE 默认把未知标签当 inline 元素处理
修正文档类型与渲染模式
IE 的怪异模式（Quirks Mode）会让 HTML5 骨架彻底失效。必须确保触发标准模式：
- 文档第一行必须是
（大小写不敏感，但不能带 XML 声明或注释） - 在
标签中添加class="no-js"，并在加载 Modernizr 或自定义脚本后替换为js，便于条件样式控制 - 避免在
前插入任何内容（包括空格、BOM 字符、服务器端注释），否则 IE 会降级为怪异模式
基础样式层做最小化归一
老浏览器对默认样式继承差异大，需用轻量级 reset 替代完整 Normalize：
- 重置关键语义标签的 display 和 margin：
header, nav, section, article, aside, footer { display: block; margin: 0; } - 禁用 IE 的 select 元素边框异常：
select { border: 1px solid #aaa; }（IE8 下outline不生效） - 避免使用
box-sizing: border-box（IE7 不支持），如需统一盒模型，改用固定 width + padding 计算
留好降级出口，不强求视觉一致
兼容 ≠ 完全还原现代效果。重点保障结构可用、内容可读、链接可点：
- 用
<div class="header"> 作为后备结构，在 JS 加载失败时仍可被 CSS 控制<li>所有语义标签都应有对应 class（如 <code><header class="site-header"></header>），确保无 JS 时样式不丢失 - 不依赖
:focus-visible或::marker等新伪类；焦点样式用:focus统一处理
