简介这份资源围绕IE浏览器Internet Explorer展开面向需要了解经典浏览器原理、或在.NET桌面应用中嵌入网页功能的开发者与学习者。压缩包共38个文件约182KB以dll动态库、cs源码、exe程序、csproj工程文件为主辅以jpg/gif界面素材、xml与xslt升级报告、resx资源文件及manifest清单整体是一个可直接用Visual Studio打开的WebBrowser控件示例工程。内容聚焦.NET Framework中WebBrowser控件的使用演示如何在Windows窗体程序里嵌入IE内核、加载网页并完成基本交互同时涉及IOleCommandTarget等接口实现便于理解浏览器控件与宿主程序的通信机制。已有621人学习下载适合想研究IE内核调用、桌面端网页嵌入或老项目兼容维护的读者参考可从中获取工程结构、控件封装思路与可运行的调试范例。1. IE 浏览器 Internet Explorer一个退役组件的兼容性考古现场2022 年 6 月 15 日微软正式停止对 Internet Explorer 11 桌面应用的支持2023 年 2 月通过 Windows 更新彻底禁用。但如果你现在打开某些企业内网、政务系统、银行 U 盾管理页或者工厂里那台跑着 Windows 7 的工控机IE 浏览器 Internet Explorer 依然活着——不是作为浏览器而是作为一套依赖 Trident 排版引擎和 ActiveX 控件模型的运行时环境。很多从业者第一次遇到这个问题是接手一个只支持 IE的老系统发现 Edge 的 IE 模式打不开某个弹窗或者 Chrome 里 ActiveX 直接报错。这篇文章不讲 IE 的历史只讲一件事当你不得不让一个现代系统或现代浏览器去兼容 IE 时到底该怎么做、参数怎么设、哪些坑一定会踩。适合正在做遗留系统迁移、内网工具开发、或者被一个请用 IE 打开的提示卡住的工程师。2. 先搞清楚 IE 兼容到底在兼容什么Trident、ActiveX 与文档模式2.1 三个必须分开看的技术层很多人把IE 兼容当成一个整体问题结果排查时方向全错。实际上它至少分三层每层的解法完全不同。第一层是排版引擎 Trident。IE 从 4 到 11 都用 Trident但不同版本对 CSS 盒模型、浮动、定位的实现差异巨大。IE6 的盒模型把 padding 和 border 算进 widthIE7 开始标准模式才改回来。IE8 引入了文档模式概念一个页面可以用 IE8 引擎渲染也可以强制降级到 IE7 引擎。这就是为什么同一个页面在 IE8 和 IE11 里可能长得完全不一样——不是浏览器版本问题是文档模式问题。第二层是脚本引擎 JScript。IE11 之前的 JScript 不支持 ES5 的很多特性比如Array.prototype.forEach、Object.keys、JSON.stringify在 IE8 里都没有。IE11 支持大部分 ES5但let、const、箭头函数、Promise 全都不支持。这意味着任何用了现代构建工具打包的代码如果不做降级在 IE11 里直接白屏。第三层是ActiveX 控件模型。这是 IE 独有的也是很多内网系统死守 IE 的真正原因。银行 U 盾、税务开票、医院读卡器、工厂 PLC 上位机这些硬件交互都通过 ActiveX 控件暴露给 JavaScript。Edge 的 IE 模式不支持 ActiveXChrome 更不可能支持。所以只要系统里有 ActiveX就永远离不开真正的 IE 运行时。提示判断一个系统能不能脱离 IE第一步不是看页面长什么样而是打开开发者工具在控制台输入!!window.ActiveXObject返回 true 就说明有 ActiveX 依赖迁移难度直接上一个量级。2.2 文档模式IE 兼容里最容易被忽略的开关文档模式决定了 IE 用哪个版本的 Trident 来渲染页面。它可以通过 HTTP 响应头X-UA-Compatible设置也可以通过meta标签设置还可以在开发者工具里手动切换。常见做法是在head最前面加一行meta http-equivX-UA-Compatible contentIEedge这行的意思是用当前 IE 支持的最高文档模式渲染。但注意如果服务器同时发了X-UA-Compatible: IE8的响应头响应头优先级高于 meta 标签页面还是会被强制用 IE8 模式渲染。这就是为什么有时候你改了代码没效果——问题根本不在代码里。排查文档模式的实际值在 IE 开发者工具控制台执行// 返回当前文档模式如 IE8、IE9、IE11 console.log(document.documentMode);如果返回 8 而你期望 11就去检查响应头和 meta 标签。另外IE11 的企业模式和兼容性视图也会覆盖文档模式这两个开关在工具 → 兼容性视图设置里企业环境还可能通过组策略下发。2.3 条件注释只对 IE 生效的写法条件注释是 IE 独有的语法在 IE9 及以下有效IE10 开始标准模式下不再支持。它的典型用法是给不同 IE 版本加载不同的 CSS 或脚本!--[if lt IE 9] script src/js/html5shiv.min.js/script ![endif]--这段代码的意思是如果 IE 版本小于 9就加载 html5shiv。lt是 less thanlte是小于等于gt是大于gte是大于等于!IE是非 IE。但要注意IE10 和 IE11 在标准模式下会把这整段当成普通注释忽略掉所以条件注释只能用来处理 IE9 及以下的差异。IE10/11 的差异要用特性检测或者 CSS hack 来处理。3. 让现代代码在 IE11 里跑起来降级、垫片与构建配置3.1 先确定目标IE11 是底线IE8 是另一个世界在动手之前先确认你到底要支持到哪个版本。IE11 和 IE8 的差距比 IE11 和 Chrome 的差距还大。IE11 支持 ES5 的绝大部分特性不支持 ES6。所以只要把代码编译到 ES5再补上几个缺失的 API大部分现代框架React、Vue 2都能跑。IE8 只支持 ES3连JSON对象都没有addEventListener也不支持需要引入 es5-shim、json2、html5shiv 等一堆垫片而且 React 15 以上、Vue 2 以上都不支持 IE8。如果目标真是 IE8建议直接放弃现代框架用 jQuery 写。我一般会先问一句这个系统有没有 ActiveX有 ActiveX 的话浏览器版本往往被硬件驱动锁死可能是 IE8 甚至 IE6这时候讨论框架选型没有意义老老实实用 jQuery 原生 DOM。3.2 Babel 配置把 ES6 编译到 ES5假设目标是 IE11用 Babel 做降级。核心配置在babel.config.js或.babelrc// babel.config.js module.exports { presets: [ [babel/preset-env, { // 目标环境IE 11 targets: { ie: 11 }, // 按需引入 core-js 垫片避免全量引入 useBuiltIns: usage, // core-js 版本3 是当前主流 corejs: 3, // 不把 ES 模块转成 CommonJS交给打包工具处理 modules: false }] ], plugins: [ // 转换 async/await 为 generator Promise babel/plugin-transform-runtime ] };targets告诉 Babel 目标环境是 IE11它会自动决定哪些语法需要转换。useBuiltIns: usage是关键它只引入代码里实际用到的垫片而不是把整个 core-js 塞进去。corejs: 3指定垫片库版本必须和package.json里安装的core-js大版本一致否则会报错。babel/plugin-transform-runtime用来避免重复注入 helper 函数同时把async/await转成 regenerator。注意这个插件需要配合babel/runtime使用而且regenerator-runtime要在入口文件里手动引入一次// 入口文件 main.js 第一行 import regenerator-runtime/runtime;漏了这行IE11 里会报regeneratorRuntime is not defined这是最常见的翻车点之一。3.3 必须手动补的几个 APIBabel 只转换语法不转换 API。有些 API 在 IE11 里不存在useBuiltIns: usage能覆盖大部分但有几个容易漏// 1. Promisecore-js 会补但如果代码里直接 new Promise 而没被检测到需要手动引入 import core-js/es/promise; // 2. Object.assignIE11 没有 import core-js/es/object/assign; // 3. Array.prototype.includesIE11 没有 import core-js/es/array/includes; // 4. String.prototype.startsWith / endsWithIE11 没有 import core-js/es/string/starts-with; import core-js/es/string/ends-with; // 5. URLSearchParamsIE11 完全没有需要 polyfill import url-search-params-polyfill;URLSearchParams是个典型坑很多 HTTP 库和表单处理代码会用到它但 core-js 不包含这个垫片必须单独装url-search-params-polyfill。3.4 打包工具的 targets 配置如果用的是 webpack babel-loader除了 Babel 配置还要注意 webpack 自身的输出。webpack 5 默认输出 ES6 代码需要设置output.environment// webpack.config.js module.exports { output: { // 告诉 webpack 目标环境不支持箭头函数等 ES6 特性 environment: { arrowFunction: false, const: false, destructuring: false, dynamicImport: false, forOf: false, module: false } }, // ...其他配置 };如果漏了这段webpack 的 runtime 代码里可能带箭头函数IE11 直接语法报错页面白屏控制台报 Script error 但看不到具体行号——因为语法错误发生在解析阶段sourcemap 也救不了。4. 避坑与排查IE 兼容里那些一定会遇到的事4.1 坑一控制台报 Script error 但没有具体信息现象IE11 里页面白屏F12 控制台只显示 Script error.没有文件名和行号。原因跨域脚本的错误信息被浏览器安全策略屏蔽了。IE 对跨域脚本的错误处理比 Chrome 更严格即使脚本同域如果通过 CDN 加载且没设 CORS 头也会被屏蔽。解决给脚本标签加crossoriginanonymous同时服务器返回Access-Control-Allow-Origin。如果是内网系统不方便改 CORS把脚本下载到本地同域加载。另外在window.onerror里可以拿到更多信息window.onerror function(message, source, lineno, colno, error) { // IE11 里 error 参数可能为 undefined但 message 和 lineno 通常有值 console.log(Error:, message, at, source, :, lineno); return true; // 阻止默认错误提示 };4.2 坑二flex 布局在 IE11 里错位现象Chrome 里正常的 flex 布局IE11 里子元素宽度不对、换行异常、justify-content: center不生效。原因IE11 实现的是 2012 年的旧版 flex 规范和现代规范有差异。最典型的是flex: 1在 IE11 里需要写成flex: 1 1 auto而且flex-basis的默认值不是0%而是auto。另外IE11 的 flex 容器如果min-height没设子元素可能撑不开。解决用 autoprefixer 加-ms-前缀同时手动覆盖几个属性.container { display: -ms-flexbox; /* IE10 */ display: flex; } .item { -ms-flex: 1 1 auto; /* IE11 需要显式写全 */ flex: 1 1 auto; /* IE11 下 flex item 的 min-width 默认是 auto可能导致溢出 */ min-width: 0; }min-width: 0这行是血泪经验IE11 里 flex item 内容过长时不会自动收缩加上这行才能正常截断。4.3 坑三input typefile的 value 拿不到现象IE11 里用 JavaScript 读取文件输入框的value返回的是C:\fakepath\文件名拿不到真实路径。原因这是 IE 的安全策略从 IE8 开始就隐藏真实路径。但有些老代码依赖真实路径做本地文件操作迁移时就卡住了。解决现代浏览器都不允许拿真实路径正确做法是用FileReader读取文件内容var input document.getElementById(fileInput); input.addEventListener(change, function(e) { var file e.target.files[0]; if (!file) return; var reader new FileReader(); reader.onload function(evt) { // evt.target.result 是文件内容 console.log(evt.target.result); }; reader.readAsText(file); // 或 readAsDataURL 读二进制 });如果业务逻辑必须拿真实路径比如调用本地 ActiveX 控件打开文件那只能继续用 IE 的ActiveXObject配合Scripting.FileSystemObject但这条路的兼容性会把你锁死在 IE 上。4.4 坑四localStorage在 IE11 的隐私模式下报错现象IE11 开启 InPrivate 浏览时访问localStorage直接抛异常页面卡死。原因IE11 隐私模式下localStorage对象存在但不可写赋值时抛QuotaExceededError。解决用 try-catch 包一层降级到内存存储var storage (function() { try { var testKey __test__; window.localStorage.setItem(testKey, 1); window.localStorage.removeItem(testKey); return window.localStorage; } catch (e) { // 降级到内存对象 var mem {}; return { getItem: function(k) { return mem[k] || null; }, setItem: function(k, v) { mem[k] String(v); }, removeItem: function(k) { delete mem[k]; } }; } })();4.5 坑五缓存导致改了代码不生效现象明明改了 JS 文件IE11 里还是跑旧代码强制刷新也没用。原因IE 的缓存策略比 Chrome 激进尤其是对XHR请求和脚本文件。有时候 F5 刷新只刷新 HTML不刷新引用的 JS。解决开发阶段在开发者工具网络选项卡里勾选始终从服务器刷新或者用 CtrlF5 强制刷新。生产环境给静态资源加版本号或 hash这是标准做法。另外IE 对Cache-Control: no-cache的响应头处理也有差异建议同时设Pragma: no-cache和Expires: 0。5. 进阶用 Edge IE 模式做过渡以及一个判断能不能迁的技巧5.1 Edge IE 模式的真实能力边界Edge 从 77 版本开始内置 IE 模式本质是调用系统里的 Trident 引擎在 Edge 标签页里渲染。它的价值是让用户不用同时开两个浏览器但能力边界必须清楚能力Edge IE 模式独立 IE11Trident 渲染支持支持文档模式切换支持IE5 到 IE11支持ActiveX 控件不支持支持BHOs 浏览器辅助对象不支持支持企业模式站点列表支持支持工具栏/扩展不支持支持结论很明确只要系统依赖 ActiveX 或 BHOEdge IE 模式就替代不了独立 IE。如果只是页面渲染和 ES5 脚本的问题IE 模式可以无缝接管。配置 IE 模式需要在 Edge 里开启企业环境通过组策略下发站点列表。站点列表是一个 XML 文件格式如下site-list version1 site urlhttp://legacy-app.internal/ compat-modeIE11/compat-mode open-inIE11/open-in /site /site-listcompat-mode指定文档模式open-in指定用 IE 模式打开。这个文件通过组策略配置企业模式站点列表指向本地路径或 HTTPS 地址。5.2 一个快速判断系统能否脱离 IE 的检查清单接手一个只支持 IE的系统时我一般按这个顺序过一遍十分钟内能给出初步结论第一步打开页面F12 控制台执行!!window.ActiveXObject。返回 true基本判死刑必须保留 IE 运行时。返回 false 或 undefined继续。第二步看网络请求里有没有X-UA-Compatible响应头值是什么。如果是IE8或更低说明页面依赖旧文档模式需要先改成IEedge再测试。第三步在控制台执行document.documentMode确认实际渲染模式。如果是 11说明页面本身不依赖旧模式问题可能只在脚本语法。第四步把页面在 Chrome 里打开看控制台报什么错。如果是SyntaxError说明有 ES6 语法没降级如果是xxx is not a function说明缺 API 垫片如果是布局错乱说明 CSS 用了 IE 不支持的属性。第五步检查有没有new ActiveXObject、attachEvent、document.all这些 IE 专有 API 的调用。有attachEvent可以改成addEventListener加垫片有document.all可以改成querySelector有ActiveXObject就只能保留 IE。这套流程走下来能迁的系统和不能迁的系统边界会非常清楚。最怕的是那种看起来能迁改到一半发现某个角落藏着 ActiveX的情况所以第一步的 ActiveX 检测一定要做在最前面。5.3 一个具体技巧用es-check在构建阶段拦截语法问题IE 兼容最烦的是问题在上线后才暴露。我习惯在 CI 里加一步es-check检查打包产物里有没有超出 ES5 的语法# 安装 npm install --save-dev es-check # 在 package.json 的 scripts 里加 check-es5: es-check es5 ./dist/**/*.js这个命令会扫描dist下所有 JS 文件发现 ES6 语法就报错并退出非零状态CI 直接失败。比等到测试同学在 IE 里点出白屏再回头查要高效得多。注意es-check只检查语法不检查 APIAPI 缺失还是要靠 core-js 和手动垫片。另外如果项目用 TypeScripttsconfig.json里的target要设成es5lib里不要加es2015以上的库否则类型检查通过但运行时在 IE 里挂掉。我自己踩过最深的一个坑是某个项目里用了Array.prototype.findBabel 没报错core-js 的useBuiltIns: usage也没检测到——因为那行代码在一个动态拼接的字符串里静态分析扫不到。结果 IE11 里那个功能静默失效没有任何报错查了一整天才定位到。从那以后凡是 IE 项目我都在入口文件里手动把core-js/es全量引入一遍体积大点就大点总比线上出玄学问题强。希望帮到你。本文还有配套的精品资源点击获取