JavaScript浏览器兼容性问题主要源于旧版浏览器（如IE8及更早）对ES5/ES6+语法和API支持不足及实现差异，解决需结合降级写法、特性检测、按需polyfill和构建工具；Babel可转译新语法为ES5，配合@babel/preset-env和useBuiltIns: "usage"按目标浏览器自动注入必要垫片；应通过API存在性检测（如'fetch' in window）替代UA判断；polyfill宜按需加载，优先使用polyfill.io或core-js/stable局部导入；对addEventListener、classList、console.log、CSS自定义属性等需针对性处理。
JavaScript浏览器兼容性问题主要出现在旧版浏览器（如IE8及更早版本）对ES5、ES6+语法和API的支持不足，以及不同浏览器对某些特性的实现差异。解决思路是：降级写法 + 特性检测 + 按需垫片（polyfill） + 构建工具辅助。
用Babel转译新语法
ES6+的箭头函数、解构、async/await等在老浏览器中直接报错。Babel能将现代JS语法转换为ES5兼容代码。
- 配置.babelrc或babel.config.js，指定目标浏览器（如"ie": "11"）
- 搭配@babel/preset-env自动按需引入polyfill（注意不建议全局注入core-js，优先用useBuiltIns: "usage"）
- Vue CLI、Create React App等脚手架默认已集成，只需调整browserslist配置
特性检测代替浏览器检测
不要用navigator.userAgent判断IE，而应检查API是否存在。例如：
- 用'fetch' in window判断是否支持Fetch API
- 用typeof Promise !== 'undefined'检测Promise
- 检测CSS属性时用'transform' in document.body.style
- 检测事件支持用'oninput' in document.createElement('input')
按需加载Polyfill
只给真正需要的用户补功能，避免拖慢现代浏览器。
立即学习“Java免费学习笔记（深入）”；
- 使用polyfill.io服务：通过URL参数声明所需特性，它会返回适配当前浏览器的最小polyfill集合
- 本地方案可用core-js/stable + regenerator-runtime/runtime，但仅在入口文件顶部按需导入
- 对Array.from、Object.assign等常用方法，可单独封装轻量兼容函数，比全量polyfill更可控
避开已知兼容陷阱
有些API看似简单，实则兼容性复杂，需特别处理：
- addEventListener在IE8-用attachEvent，且事件名带on前缀、this指向不同
- classList在IE9+支持，IE8需用className字符串操作
- console.log在IE8无控制台时会报错，可用if (window.console) console.log(...)防护
- CSS自定义属性（--var）IE完全不支持，需用postcss-custom-properties编译为静态值
