IE兼容性需分层处理：DOCTYPE必须首行无空格以避免怪异模式；HTML5标签需html5shiv加display:block；JS要降级API并禁用ES6+语法；Flex需前缀且Grid须回退；优先保障核心功能。
IE 浏览器兼容性问题不是靠“加个 X-UA-Compatible 就能解决”的事，而是得按 IE 实际能力分层处理：IE8 不认识 querySelector，IE9 不渲染 section 为块级元素，IE10 的 flexbox 行为和现代浏览器差一倍——不逐层拆解，补丁越打越乱。
DOCTYPE 必须首行无空格，否则直接进怪异模式
这是所有兼容问题的起点。IE6–IE11 一旦触发怪异模式（Quirks Mode），盒模型、浮动逻辑、字体渲染全换一套规则，后续 CSS 和 JS 都可能失准。
-
<!DOCTYPE html>必须独占第一行，前面不能有任何字符：包括<!-- 注释 -->、PHP 输出的空白、甚至 UTF-8 BOM 字节 - 验证方式：在 Chrome DevTools 的 Elements 面板顶部看渲染模式，显示 “Standards” 才算成功；若显示 “Quirks”，就得回查 HTML 源码开头
- 不要用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...>这类过时写法，它在 IE 中反而容易触发兼容视图
HTML5 语义标签在 IE8 及以下默认是 inline，必须手动设 display:block
IE8 根本不会把 header、nav、section 当成块级元素，直接导致布局塌陷、样式失效。仅引入 html5shiv 不够——它只让 IE 知道这些标签存在，但不会自动加 display: block。
- 必须配这条 CSS 规则：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } -
html5shiv要条件加载，避免现代浏览器额外请求：<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 这个
<script>必须放在<head>中，且在所有自定义 CSS 之前，否则样式可能不生效
JS API 必须降级，不能依赖 ES6+ 语法或现代原生方法
IE8–IE11 缺失大量基础 API，硬写 fetch 或 element.classList.add() 会直接报错，而不是静默失败。
立即学习“前端免费学习笔记（深入）”；
-
querySelector→ 降级为document.getElementById或document.getElementsByTagName；classList→ 改用element.className += ' active'（注意空格防重复） -
fetch→ 必须换XMLHttpRequest，或引入whatwg-fetchpolyfill，且要确保它在所有 JS 之前加载 - 避免
let/const：IE10 及以下不支持；统一用var更稳妥；箭头函数、模板字符串、Promises全部禁用，除非已通过 Babel 转译 - 事件监听：IE8 用
attachEvent('onclick', fn)，而非addEventListener；取目标元素用window.event.srcElement而非event.target
Flex/Grid 布局在 IE 中必须有明确回退方案
display: flex 在 IE10+ 有部分支持（需 -ms-flexbox 前缀），但行为差异大；display: grid 在 IE 中完全不可用，加前缀也无效。
- Flex 布局要同时写两套：
display: flex;和display: -ms-flexbox;，并配-ms-flex-align等前缀属性，但复杂嵌套建议放弃 - Grid 布局必须重写为
float/inline-block/table-cell，或用@supports (display: grid)包裹新写法，旧浏览器自动跳过 - 避免
gap、place-items、aspect-ratio等新属性——它们在 IE 中无等效替代，强行加前缀也没用 -
calc()在 IE9–IE11 中对嵌套表达式支持不稳定，比如calc(100% - calc(2em + 1px))可能计算错误，建议扁平化写法
真正难的不是加补丁，而是判断哪些功能值得为 IE 降级：一个 fetch 请求可以封装成兼容函数，但整套 CSS Grid 布局重写成本可能远超用户量带来的收益。优先保核心结构和表单交互，视觉动效和排版细节该降级就降级，别硬撑。
