必定要 http-equiv="X-UA-Compatible" content="ie=edge"？

时间 2019-11-16

标签必定 http equiv compatible content edge 栏目 HTTP/TCP 繁體版

原文原文链接

博客地址html

Preface

平时会用 vue 写新项目，老项目就在原有基础上更新。对于 vue 这种框架，使用官方的脚手架一般就避免了不少问题，就像平时用模板建立新的单页同样。vue

然而有时老是会遇到些不按模板走的代码，虽然跑起来也没有问题，可是放到有些浏览器上就有 bug 了，这个时候对既有模板的理解和掌握就很重要了。git

Main

当我用 html 模板建立一个新单页时，拿到的页面是这样的，vue 也是相似，至少三个 meta 标签基本都是同样的：github

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
</body>

</html>

viewport 是在兼容移动端时才了解的内容，费了很多功夫。而 X-UA-Compatible 则是在遇到很是规代码的时候才想起来的。有一回改个老项目，用了 transform，在 ie11 上测试，没有用，并且在它的工具栏里样式表里根本看不到我写的代码，这个时候我就好奇了，这是 ie11 啊，怎么会不支持 transform 呢？而后我瞄了一下开发者工具，大概是这样的：浏览器

而后我就好奇了，为何会是 ie7 模式呢？我明明装的是 ie11 浏览器啊，而后脑壳一闪，好像明白了什么，看了看 html ，果真没有:框架

<meta http-equiv="X-UA-Compatible" content="ie=edge">

加上以后，再刷新，网页就正常了。工具

在这件事以前，我知道这个东西，可是由于是用的模板，一直没有遇到过这个问题，并且一般来讲，我会觉得，我既然是在 ie11 里打开的，默认你也没有理由用 ie11- 的文档模式去渲染啊，结果就错了。后来看到 SO 上高票答主大概是这么解释 ie 的行为的：测试

ie 会用它认为最好的方式去渲染页面，若是没有上面那行代码的话ui

此外，ie11 已经开始废弃上面那个了，若是不兼容 ie 的话，其实上面的代码也能够不用写了，不过目前为止 html 模板和 vue 的模板都仍是默认支持的。而上面的那行代码实际意思呢，就是：spa

Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明。对于 IE8，始终保持以 IE8 标准模式渲染页面。对于 IE9，则以 IE9 标准模式渲染页面。

固然 ie 还能够等于其余值，不过其余值大多都是老版本，目前而言，都没有必要去纠结了，譬如：

"IE=edge"
"IE=11"
"IE=EmulateIE11"
"IE=10"
"IE=EmulateIE10"
"IE=9"
"IE=EmulateIE9
...

Ending

Reference

What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?