现代浏览器与旧版IE适配需识别环境、按需加载polyfill、隔离不兼容语法并差异化构建；IE8–11仍需支持，推荐特性检测+UA双重判断，Babel设targets: {ie: '11'}，用script type="module"/nomodule分流，CSS Flex加-ms-前缀、Grid降级为Flex。
现代浏览器与旧版IE的环境适配，核心在于识别运行环境、按需加载补丁、隔离不兼容语法，并控制构建输出。IE8–IE11虽已逐步退出，但在部分政企内网或遗留系统中仍需支持，不能简单放弃兼容。
检测IE版本并做环境分流
依赖 userAgent 判断不可靠（易被伪造、Edge也带MSIE），推荐用特性检测 + UA双重判断。例如：
— 检测是否为IE：!!window.ActiveXObject && 'documentMode' in document
— 获取具体版本：document.documentMode || (function(){if(/MSIE (\d+)/.test(navigator.userAgent)) return parseInt(RegExp.$1);})()
— 更稳妥方式是用 条件注释（仅IE9及以下）在HTML中注入特定class或script，如：<!--[if IE]><html class="ie"><![endif]-->
关键API缺失的填充策略
IE缺少Promise、fetch、Array.from、Object.assign等，应按需引入polyfill，而非全量加载：
- 使用 core-js 的按需引入（如
import 'core-js/stable/promise'），避免污染全局 - fetch可用 whatwg-fetch，但注意其不支持abort，IE下需配合 XMLHttpRequest 封装简易abort逻辑
- DOM操作类（如
Element.closest、NodeList.forEach）建议用轻量工具函数替代，比加载整套polyfill更可控
语法与特性的安全降级
ES6+语法不能直接在IE中执行，需Babel处理；但要注意配置边界：
立即学习“Java免费学习笔记（深入）”；
- Babel目标设为
targets: { ie: '11' }，禁用useBuiltIns: 'usage'时手动导入polyfill，防止漏掉隐式依赖 - 避免使用
const/let声明循环变量（IE9–10存在闭包问题），统一用var或改用立即执行函数封装 - CSS方面，Flexbox在IE10–11需加
-ms-前缀，且不支持gap，可用margin模拟；Grid仅IE10+支持旧版语法（display: -ms-grid），与现代Grid不兼容，建议降级为Flex或float布局
构建与部署的差异化处理
同一套源码可输出多版本，提升维护效率：
- Webpack中用 multiple configurations，一份针对Chrome/Firefox/Safari生成ES2017+代码，另一份针对IE11生成ES5代码并注入polyfill入口
- 通过
<script type="module">加载现代JS，再用<script nomodule>加载兼容版，让IE自动忽略module脚本（IE不识别该type） - 上线前用 caniuse-api 或 browserslist 验证目标特性支持度，避免因配置偏差导致白屏
不复杂但容易忽略。适配不是让所有代码退回到ES3，而是分层拦截、精准补位、渐进交付。
