IE11以下浏览器报错
1.在低版本的谷歌浏览器和ie11浏览器以下页面变成空白。以及下图报错
解决方法:
(1)先安装babel-polyfill依赖,npm install babel-polyfill --save
(2)安装好之后在配置文件webpack.config.dev.js中引入polyfills.js。如下图,下图为多入口文件(多页)配置的引入方式。
单入口(单页)文件配置如下图所示
(3)在入口文件中导入babel-polyfill,即 import 'babel-polyfill'。注意:在单页应用中只需在最终的入口文件中导入即可,在多页应用中每一个入口文件都要导入。实例如下图。
(4)参考链接:https://blog.csdn/roamingcode/article/details/81975858
2.在ie10及以下报下图错误
报错原因:是在constructor构造函数的this.state中初始变量的时候使用了this,因为super(props)中只传了props,这里在低版本浏览器情况下会报错。具体原因参考:https://segmentfault/a/1190000011352429。
解决方法:
将this.state中的变量改成如下图的形式。
3.从IE9浏览器开始页面布局发生了变化。
问题原因:使用了flex布局。flex布局对于IE10以下的浏览器无法兼容。参考链接:https://wwwblogs/yangjie-space/p/4856109.html及https://www.jb51/css/522283.html
以上报错均是在项目开发处理低版本谷歌浏览器和IE浏览器兼容上面遇到的错误以及处理的方法。下面给大家分享一些处理浏览器兼容的链接。
react处理兼容到IE8浏览器方法链接:
http://react-china/t/reactjs-ie8/1364
https://github/xcatliu/react-ie8
https://wwwblogs/godghdai/p/7659033.html
https://segmentfault/q/1010000005889716/a-1020000005889882
更多推荐
react浏览器兼容报错处理
发布评论