在前端开发中，我们时常需要考虑页面在主流浏览器中的兼容性，而在这些浏览器中，IE11 可谓是一个不可或缺的存在。然而，由于其对于一些前沿的 Web 技术支持不足，我们无法依赖其默认的渲染方式，因此在开发中需要寻找一些解决方案，以满足 IE11 的兼容性要求。而 Next.js 作为一款热门的 React 框架，其在处理 IE11 兼容性方面有着自己的一套解决方式。
polyfill
为了解决 IE11 不支持的一些语法和 API，我们需要在代码中引入一些 polyfill。但是，由于引入过多的 polyfill 可能会增加项目的负担，因此我们需要找到合适的方案，以尽可能减小项目的体积。
core-js
core-js 是一个可以实现 ECMAScript 标准库的 polyfill 库。通过使用它，我们可以在 IE11 下使用许多新的 JavaScript 功能。
首先，在项目中安装 core-js。
npm install core-js --save
然后，在需要使用 polyfill 的位置引入对应的模块，例如：
import 'core-js/es6/string';
这样，我们就可以在代码中使用 String.prototype.startsWith 和 String.prototype.endsWith 等新的 API 了。
@babel/preset-env
@babel/preset-env 是一个可以根据目标浏览器的版本自动添加 polyfill 的预设。通过配置它，我们可以将这项工作交给 Babel 自动完成，减轻我们的负担。
在项目中安装 @babel/preset-env。
npm install @babel/preset-env --save-dev
然后，在 .babelrc 或者 babel.config.js 中进行配置，例如：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- --
---------- -
----- ----
-
-
-
-
-这样，我们在开发中使用的新的 JavaScript 功能就会自动被添加 polyfill 了。
浏览器样式兼容性问题
在处理浏览器兼容性问题时，我们除了要关心 JS 功能的兼容性外，还需要考虑样式兼容性。由于浏览器对样式的实现方式存在差异，有些 CSS 属性在 IE11 中会有些问题，因此我们需要找到解决方案。
styled-jsx
styled-jsx 是 Next.js 提供的一种用于编写 CSS 样式的方案。它支持使用类似于 Vue.js 的 scoped 样式进行开发，并且可以在服务端进行预编译。对于跨浏览器样式兼容性问题，我们可以在对应的样式中使用 pragma 指定 IE11 专用样式，例如：
-- -------------------- ---- -------
------ ------
------ -
----------------- -----
------ ------
-
-- ---- ---- --
-- - ------------- --
------ -
----------------- ----
-
----------这样，只有在 IE11 中才会应用样式。
CSS Hack
CSS Hack 可以在样式中使用一些 Hack 代码以实现跨浏览器的兼容性。虽然使用这种方式可以实现 IE11 的兼容性，但是其在可读性和维护性上都存在一些问题，因此我们需要谨慎使用。
以下是一些常见的 CSS Hack。
_*- 仅 IE6 执行
* html .selector_background-color: red
*+- 仅 IE7 执行
div + span {...}
*- 仅 IE6 和 IE7 执行
*font-size: large
!- 仅 IE6 和 IE7 执行
color: red !important\; _color: blue
如何测试
最后，我们需要测试我们在开发过程中做出的兼容性调整是否真正有效。为了测试在 IE11 中是否存在问题，我们需要使用相应的工具来模拟其运行环境。
IE VM
Microsoft 提供了一些虚拟机以供我们测试在不同版本的 IE 中的兼容性。我们可以前往 Internet Explorer Application Compatibility VPC Image 下载相应的虚拟机，并导入到虚拟机软件中进行测试。
cross-browser-testing
cross-browser-testing 是一个在线的跨浏览器测试服务。通过使用这个服务，我们可以在真实的浏览器环境下测试我们的项目，以确保其在各个浏览器中的兼容性。
总结
在开发中处理 IE11 的兼容性问题需要我们引入 polyfill 进行 JavaScript 功能的兼容，并使用 styled-jsx 或 CSS Hack 解决样式兼容性问题。在测试方面，我们可以使用 IE VM 或 cross-browser-testing 来模拟浏览器环境。通过这些技巧，我们可以确保项目的兼容性并提供更好的用户体验。
参考示例代码：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- --
---------- -
----- ----
-
-
-
-
--- -------------------- ---- -------
------ ------
------ -
----------------- -----
------ ------
-
-- ---- ---- --
-- - ------------- --
------ -
----------------- ----
-
----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64578445968c7c53b0a3186e