必定要 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?

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。