> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/bugs/02-liu-lan-qi-jian-rong-wen-ti-gai-lan.md).

# 浏览器兼容问题概览

### 浏览器兼容问题

#### 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 on IE10 giving a SecurityError**](https://stackoverflow.com/questions/15114279/websocket-on-ie10-giving-a-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](https://i.stack.imgur.com/fqpzH.png)

备注：修改后，重启IE浏览器。

**3.** [**SCRIPT1006: Expected ')'**](https://stackoverflow.com/questions/44732066/script1006-expected)**、SCRIPT1002: Syntax error**

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

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

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

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

**SCRIPT1002: Syntax error:** 不支持 class。如

```js
class Base {
  constructor() {}
}
```

**解决：** 用转换器，将ES6转成ES5。比如 `babel`。

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

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

  ```js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [
            resolve('src'),
            resolve('test'),
            resolve('node_modules')
          ],
        }
      ]
    }
  }
  ```
* **<umi@3.1.x>**：配置 `nodeModulesTransform` 设置 node\_modules 目录下依赖文件的编译方式。[nodeModulesTransform](https://umijs.org/zh-CN/config#nodemodulestransform)
* \*\*<umi@2.x.x>：\*\*的修改就比较麻烦了。
  * extraBabelIncludes 属性：定义额外需要做 babel 转换的文件匹配列表，格式为数组，数组项是 [webpack#Condition](https://webpack.js.org/configuration/module/#condition)。（尝试修改，但是没有成功）
  * chainWebpack 属性：修改 webpack 配置。（推荐）

    ```js
    // 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` 字段。

  ```js
  ['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`，还是有报错。

```js
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](https://github.com/chenzhenxi/element-remove) polyfill。
2. 为 Element 对象定义一个 remove 方法：

   ```js
   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的层叠规则与其他主流浏览器不一样**