在一般场合,Ionic4运行在手机端,没必要去兼容IE,但还是可以了解一下,以免有这样的需求。 Ionic4,它更趋向于一个UI框架,然后可配套Angular、React、Vue等框架使用。以Angular版本为例,兼容IE浏览器,主要是JS CSS的语法和用法的调整处理。
1. JS,可以使用内置的Polyfill方案。
Angular项目默认提供了Polyfill支持,打开Ionic4项目中的src目录,里面有自动生成的polyfill.ts文件,打开可以看到这样的内容:
代码语言:javascript复制/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
为了减轻打包的大小,默认上面的import都是注释掉的,这里要兼容IE,自然把它们打开,我觉得注释说明得很清楚,跟着做就好了。
重新编译运行,可以看到原来在IE浏览器提示脚本错误的都消失了,页面能正常运行,只是样式可能会有点变形。
2. CSS自定义样式调整
Ionic4大量使用了shawdow-dom,IE浏览器不解析#shadow-root,但会解析其下内容,所以Dom都会存在,只是样式可能会不同。系统内置样式基本是做了兼容处理的,而自定义样式放在全局和局部都会存在不一样的兼容效果,可以做下兼容性调整,如:
代码语言:javascript复制 --background: transparent;
background-color: transparent; // 兼容性后备处理