IE10+支持Flexbox但需-ms-前缀，IE8/9需兼容addEventListener、JSON、querySelector等API差异，且存在盒模型、事件、渲染等隐性不一致问题。
IE11 还能用 flex，但 IE10 及更早版本必须加 -ms- 前缀
IE 对 CSS Flexbox 的支持是分水岭式的：IE10 开始支持（带 -ms- 前缀），IE11 支持无前缀版本，但行为仍有差异。比如 flex: 1 在 IE10/11 中可能不触发收缩，而 Chrome 会。
常见错误现象：display: flex 写了但子元素堆成一列、宽度不占满、align-items 失效。
- 必须为 IE10+ 显式写两套声明：
display: -ms-flexbox; display: flex; -
flex-direction在 IE 中对column-reverse支持极差，建议避免 - IE11 不支持
flex-wrap: wrap-reverse，写了等于没写 - 用
Autoprefixer时需明确配置browsers: ["ie >= 10"]，否则默认可能不输出-ms-
addEventListener 在 IE8 及以下根本不存在
IE8 及更早版本只认 attachEvent，且事件名要加 on 前缀（如 "onclick" 而非 "click"），this 指向也不同——它永远指向 window，不是绑定的元素。
使用场景：需要兼容 XP 系统下运行的 IE8（某些工控、银行内网仍存在）。
立即学习“前端免费学习笔记（深入）”；
- 别直接判
if (element.addEventListener)就完事，IE8 会进 else 分支但attachEvent在 IE9+ 已被废弃，混用反而出错 -
attachEvent无法保证事件执行顺序，多个onclick绑定可能乱序触发 - 推荐用轻量封装，例如：
function addEvent(el, type, fn) { return el.addEventListener ? el.addEventListener(type, fn) : el.attachEvent("on" + type, fn); }，但要注意 IE8 下需手动处理this绑定
JSON.parse 和 JSON.stringify 在 IE7 及以下完全不可用
IE8 开始原生支持 JSON 对象，IE7 及以下连 JSON 全局变量都没有。很多老项目用 eval() 解析 JSON，这是严重安全隐患，且 IE7 对 Unicode 转义（如 \u4f60）解析不稳定。
性能影响：引入 json2.js（Douglas Crockford 官方补丁）约增加 3KB gzip 后体积，但能彻底解决兼容问题。
- 不要用条件注释只给 IE 加载
json2.js，因为 IE10+ 已不支持条件注释，反而漏掉部分 IE8/9 - 若已用打包工具（如 Webpack），可配
resolve.alias把json指向兼容层，但注意 Node 环境下不能误替换 -
JSON.stringify({ a: undefined })在 IE8 返回{}，Chrome 返回{}，看似一致，但传入函数或循环引用时，IE8 直接报错而非静默忽略
IE 的 document.querySelector 从 IE8 开始支持，但仅限 CSS2.1 选择器
IE8 支持 querySelector，但不支持属性选择器中的波浪号匹配（[class~="btn"]）、伪类（:nth-child）、子选择器（ul > li 在部分 IE8 SP2 补丁中才修复）。
容易踩的坑：开发时用 Chrome 测试正常，上线后 IE8 报 TypeError: Object doesn't support property or method 'querySelector'——其实不是方法不存在，而是选择器语法非法导致返回 null，后续调用 .style 才真正报错。
- 避免在 IE8 环境用
querySelectorAll(".item:nth-of-type(2)")，改用 class 或 ID 定位 - IE8 不支持
dataset，想读data-*属性得用getAttribute("data-id") - 如果项目已用现代框架（如 Vue 2.x），其模板编译器生成的选择器可能隐式依赖高级语法，此时强行降级到 IE8 风险极高
真正麻烦的不是“能不能跑”，而是“跑得不像”：IE 的盒模型、事件冒泡路径、字体渲染、甚至 Date 构造函数对字符串的解析都和标准有细微偏差。这些点不会报错，但会让布局错位、时间显示异常、接口莫名失败——得靠真实环境反复点检，截图比对，没法靠工具全拦住。
