ie8–ie9不支持addeventlistener，应使用attachevent降级；html5标签需html5shiv；ie10–11 flex布局需兼容写法；es5+ api需es5-shim补丁。
IE8–IE9 里 addEventListener 直接报错怎么办
IE8 及更早版本不支持 addEventListener，调用时会抛出 Object doesn't support property or method 'addEventListener'。这不是语法写错了，是原生就不认这个函数。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
attachEvent降级（仅 IE8/9）：判断element.addEventListener是否存在，不存在则用element.attachEvent('onclick', handler)；注意事件名要加on前缀，且this指向window - 别直接覆盖
Element.prototype.addEventListener——IE8 不支持原型扩展 DOM 元素，会静默失败 - 如果项目已用 jQuery，优先走
$().on()，它内部已处理兼容逻辑；但要注意 jQuery 3.0+ 已彻底放弃 IE8 支持，得用 jQuery 1.x 或 2.x（2.x 仅支持 IE9+）
HTML5 新语义标签如 <header></header> 在 IE8 里不生效
IE8 及以下不认识 <section></section>、<nav></nav> 这类标签，解析时当普通未知元素，不设默认样式，CSS 选择器也匹配不到（比如 header { display: block; } 完全无效）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须引入
html5shiv：在中用条件注释只给 IE8- 加载<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> - 不能放在
底部——IE8 必须在 DOM 解析前就执行 shiv，否则标签已被当成 unknown element 处理完毕 - 自己用
document.createElement('header')手动“注册”也行，但得对每个新标签都来一遍，不如 shiv 一劳永逸
Flexbox 布局在 IE10–IE11 里表现异常
IE10 使用旧版 Flex 语法（display: -ms-flexbox），IE11 开始支持标准语法但仍有 bug，比如 flex-wrap: wrap 在某些嵌套场景下失效，或 align-items: center 对文字垂直居中不准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写 CSS 时必须同时写三套：旧 IE10 前缀（
-ms-flex）、IE11 标准 + 修复（display: flex+ 额外margin: auto补位）、现代浏览器标准 - 避免在 IE 中依赖
flex-grow实现等宽：IE10–11 对该属性计算不稳定，改用flex: 1更可靠 - 测试时重点看容器高度是否塌陷——IE 下若子项未设
min-width，flex 容器可能算不出高度，需显式设min-height
ES5+ 语法（如 Array.prototype.forEach）在 IE8 报错
IE8 原生不支持 forEach、map、JSON.parse 等，直接调用会提示 Object doesn't support this property or method。Babel 编译只能转语法，不能补 API。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须引入
es5-shim（配合es5-sham）：它会检测环境并动态挂载缺失方法到原生原型上 - 不要只引入
json2.js就以为 JSON 搞定了——IE8 缺的不只是JSON.parse，还有Array.isArray、Function.bind等，shim 是成体系补丁 - 若用 webpack，可通过
entry提前引入 shim，但注意加载顺序：shim 必须在所有业务代码之前执行
真正麻烦的不是加几个 polyfill，而是旧版 IE 对 DOM 渲染和事件冒泡的实现差异——同一段 JS 在 Chrome 里跑得顺，在 IE8 里可能因为某个 parentNode 返回 null 就卡死，得一行行查兼容性表，而不是只盯着语法报错。
