前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • 浏览器兼容问题
  • 360浏览器

这有帮助吗?

  1. Bugs

浏览器兼容问题概览

上一页浏览器常见问题概览下一页HTML常见问题概览

最后更新于3年前

这有帮助吗?

浏览器兼容问题

IE浏览器

1.Symbol 未定义

**解决:**添加 babel-polyfill 或者直接引入 https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js。

备注:polyfill 文件需要在其他 .js 文件(尤其是报错的js文件)之前引入。

2. SCRIPT5022 SecurityError。

**原因:**打开一个本地(内部网)域的 websocket,IE抛出一个安全性错误(SecurityError)

**解决:**禁用IE识别本地站点的自动算法:Tools > Internet Options > Security > Local Intranet > Sites.

取消选中的 include all local (intranet) sites not listed in other zones ,或者取消所有选中的复选框。

intranet detection settings

备注:修改后,重启IE浏览器。

**原因:**IE浏览器不支持es6的一些新语法。

一般项目编译,会将项目根目录下 src 等文件夹下的所有.js|jsx 文件中的 ES6 语法转换成 ES5,且会将node_modules文件夹下所有文件忽略,而部分node_modules 下的包会包含了ES6语法。

SCRIPT1006: Expected ')': 不支持函数的默认参数。如:

function correlation (xMatrix, xMatrix = xMatrix, options = {} ) {
}

SCRIPT1002: Syntax error: 不支持 class。如

class Base {
  constructor() {}
}

解决: 用转换器,将ES6转成ES5。比如 babel。

采用不同工具创建的项目,修改 babel配置的方法不一样。

  • **webpack 配置文件:**在 module -> rules 的 babel-loader 的 include 属性中追加 resolve('node_modules')。

    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [
              resolve('src'),
              resolve('test'),
              resolve('node_modules')
            ],
          }
        ]
      }
    }
  • **umi@2.x.x:**的修改就比较麻烦了。

    • chainWebpack 属性:修改 webpack 配置。(推荐)

      // config.js
      export default {
        chainWebpack: config => {
          config.module
          .rule('js-in-node_modules')
          .before('js')
          .test(/\.(js|jsx|ts|tsx)$/)
          .include.add(/node_modules/)
           .end()
          .use('babel')
          .loader('babel-loader')
          .options({
            presets: [
              ['@babel/preset-env', { targets: 'defaults', modules: false }],
              ['@babel/preset-react'],
              ['@babel/preset-typescript'],
            ],
          });    
        }
      }

      https://github.com/umijs/umi/issues/2025

4. IE浏览器会缓存GET请求

  • 在 get 请求的 url 中增加随机标识。如:时间戳。

  • 请求头 headers 添加两个键值参数。服务端需要在 Access-Control-Allow-Header 里面添加 cache-control、Pragma 字段。

    ['Cache-Control'] = 'no-cache';
    ['Pragma'] = 'no-cache';
  • 修改浏览器配置。Internet选项 >> 浏览历史记录 >> 设置 >> Internet 临时文件的选项改为‘每次访问网页时’

  • 在服务端设置 header(“Cache-Control: no-cache, must-revalidate”)

  • 改为 post 接口

5. This browser lacks typed array (Uint8Array) support which is required by buffer v5.x. Use buffer v4.x if you require old browser support。(未解决)

备注:将 buffer 版本回退到4.3.0,还是有报错。

npm list buffer
├── buffer@4.3.0
└─┬ umi-plugin-react@1.15.8
  └─┬ webpack@4.41.1
    └─┬ node-libs-browser@2.2.1
      └── buffer@4.3.0  deduped

6. cannot call a class as a function。(未解决)

注:react-dom.production@17.min.js 报错。

7. DOM 对象不支持 remove 属性或方法

原因: IE 浏览器的 Element 对象是没有remove方法的

解决:

  1. 为 Element 对象定义一个 remove 方法:

    if (!('remove' in Element.prototype)) {
      Element.prototype.remove = function() {
        if (this.parentNode) {
          this.parentNode.removeChild(this);
        }
      };
    }

8. transform: translate|translateY 等对 table 中的 display: table-header-group|table-row-group 元素(thead、tbody)无效。

9. 不支持event.target.files(IE10)

解决:可修改为 event.srcElement.files || event.target.files

10. 不支持 new FormDate() (IE9)

解决:引入 FormData 的 polyfill。参考 https://gist.github.com/Rob--W/8b5adedd84c0d36aba64、https://github.com/henryluki/FormData

11. 无法获取file对象(IE9)

解决:参考 https://blog.csdn.net/weixin_34352005/article/details/91918449、http://www.zhishichong.com/article/83379

360浏览器

1. z-index的层叠规则与其他主流浏览器不一样

3. 、SCRIPT1002: Syntax error

umi@3.1.x:配置 nodeModulesTransform 设置 node_modules 目录下依赖文件的编译方式。

extraBabelIncludes 属性:定义额外需要做 babel 转换的文件匹配列表,格式为数组,数组项是 。(尝试修改,但是没有成功)

引入 polyfill。

SCRIPT1006: Expected ')'
nodeModulesTransform
webpack#Condition
element-remove
WebSocket on IE10 giving a SecurityError