新版HTML需分层兼容旧浏览器：IE8–IE11不支持querySelector、classList、fetch等API，须降级为getElementById、className、XMLHttpRequest；需添加X-UA-Compatible meta（置于head最前）、html5shiv（仅IE8-）、Flex/Grid回退方案，并避免ES6+语法。
新版 HTML 在低版本浏览器（比如 IE8–IE11、旧版 Safari/Android Browser）中直接打开会出问题，不是空白页就是样式错乱、脚本报错——这不是“加个 meta 标签就能解决”的事，而是得按浏览器实际能力分层处理。
IE8–IE11 连 document.querySelector 都不支持，必须降级 API
新版 HTML 常依赖 querySelector、classList、fetch 等原生 API，但 IE11 及以下根本不认识这些。硬写会直接报 Object doesn't support property or method 'querySelector'。
- 用
document.getElementById或document.getElementsByTagName替代querySelector，尤其在 DOM 初始化逻辑里 -
element.classList.add('active')要改成element.className += ' active'（注意空格防重复） -
fetch必须换为XMLHttpRequest，或引入轻量 polyfill（如whatwg-fetch），但需确保它在<script></script>中**最前加载** - 避免使用箭头函数、
const/let（IE11 支持let，但 IE10 及以下不支持；统一用var更稳妥）
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 不能少，但也不万能
这个标签只对 IE 有效，作用是让 IE 强制启用最高可用文档模式（比如 IE11 下用 Edge 模式）。但它不解决 JS/CSS 兼容性，只是“别用怪异模式渲染”这一步。
- 必须放在
最前面，**在所有其他<meta>和<title></title>之前**，否则可能被忽略 - 对 Chrome、Firefox、Safari 完全无效，别指望它修复非 IE 问题
- 如果服务器返回了
X-UA-CompatibleHTTP 头，它会覆盖 HTML 中的<meta>，要检查响应头是否冲突
CSS Flex/Grid 在旧浏览器里基本不可用，得手动回退
display: flex 在 IE10+ 有部分支持（需 -ms- 前缀），但行为差异大；display: grid 在 IE 中完全不支持（哪怕加前缀也没用）。
立即学习“前端免费学习笔记（深入）”；
- Flex 布局要加
display: -ms-flexbox并配合-ms-flex-align等前缀属性，但建议只用于简单排列，复杂嵌套放弃 - Grid 布局必须重写为 float / inline-block / table-cell，或用
@supports (display: grid)包裹新写法，旧浏览器自动跳过 - 避免
gap、place-items等新属性，它们在 IE 中无等效替代
<style>
.container {
display: -ms-flexbox;
display: flex;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
</style>HTML5 语义标签（<header></header>、<nav></nav>）在 IE8 及以下需要 document.createElement
IE8 不识别 <section></section> 这类标签，导致 CSS 选择器失效（header { color: red; } 不生效），且无法通过 JS 获取元素。
- 必须在
中引入html5shiv（或手动执行document.createElement('header')等） - 只对 IE9 以下必要；IE9+ 已原生支持大部分语义标签
- 注意：
html5shiv必须通过<script></script>加载，且**仅在条件注释中给 IE8- 执行**，避免影响现代浏览器
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
兼容旧浏览器不是“让所有功能一模一样”，而是判断哪些交互可降级（比如用 onclick 替代 addEventListener）、哪些样式可舍弃（比如阴影、圆角）、哪些 JS 功能必须关掉（比如 WebSocket）。最常被忽略的是：没验证目标浏览器的真实 UA 和实际能力，只靠“听说 IE11 支持 ES6”就写 const，结果在企业内网的 IE11 兼容模式下直接挂掉。
