<meta http-equiv="X-UA-Compatible">必须放在<head>最前面，因IE解析HTML时一旦开始渲染即停止读取后续兼容声明，位置靠后（如在<title>之后）会被忽略而退至默认模式（如Quirks或IE5），且content值严格区分大小写、禁用空格。
IE8–IE11 仍需兼容时，<meta http-equiv="X-UA-Compatible"> 是唯一可控的前端手段；但 IE11 后期更新已屏蔽 IE=5、IE=7 等旧模式，强行设置会失效。
为什么 <meta http-equiv="X-UA-Compatible"> 必须放在 <head> 最前面？
IE 解析 HTML 时，一旦开始渲染就不再读取后续的 <meta> 兼容声明。如果它被 <title>、其他 <meta> 或注释挡在后面，整个声明会被忽略——页面直接 fallback 到默认文档模式（通常是 Quirks 或 IE5 模式）。
常见错误写法：
<head> <title>My App</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- ❌ 失效 --> </head>
正确顺序：
立即学习“前端免费学习笔记（深入）”；
<head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- ✅ 第一行 --> <title>My App</title> </head>
注意：content 值严格区分大小写，ie=edge 或 IE = edge（含空格）均无效。
IE=edge 和 IE=EmulateIE9 的实际区别在哪？
IE=edge 表示“用当前 IE 支持的最高标准模式”，但它不锁定版本：IE9 下是 IE9 模式，IE11 下可能是 IE11 模式（即使页面未适配）。而 IE=EmulateIE9 强制按 IE9 标准模式渲染，且尊重 <!DOCTYPE> —— 有 <!DOCTYPE html> 就走 IE9 标准；没声明就退到 IE5 Quirks 模式。
-
IE=9：无视<!DOCTYPE>，强制 IE9 标准模式 -
IE=EmulateIE9：有<!DOCTYPE>→ IE9 标准；无 → IE5 Quirks -
IE=edge：IE9 → IE9 模式；IE11 → IE11 模式（可能破坏布局）
若客户明确要求“和 IE9 一模一样”，选 IE=EmulateIE9；若只要“尽量用最新标准”，才用 IE=edge。
HTTP 响应头比 <meta> 更可靠，怎么配？
服务器返回的 X-UA-Compatible HTTP 头在 HTML 解析前就生效，不受位置、大小写、空格影响，优先级高于 <meta>，能规避 90% 的“模式切换失败”问题。
IIS（web.config）：
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=EmulateIE9" />
</customHeaders>
</httpProtocol>
</system.webServer>Apache（.htaccess）：
Header set X-UA-Compatible "IE=EmulateIE9"
注意：若 HTML 中同时存在 <meta> 和响应头，<meta> 会覆盖响应头 —— 所以上线前务必删掉所有 <meta http-equiv="X-UA-Compatible">。
IE 兼容模式不是万能解药，JS 和 CSS 仍要单独处理
<meta> 或 HTTP 头只控制文档渲染模式，不修复 JS API 缺失或 CSS 行为差异。比如：
-
addEventListener在 IE8- 不可用，必须用attachEvent回退 -
querySelector在 IE7- 不支持，需 polyfill 或改用getElementById -
flexbox在 IE10+ 需加-ms-前缀，且部分属性（如align-content）行为不一致
最常被忽略的一点：即使设置了 IE=EmulateIE9，如果页面里用了 console.log 且开发者工具未打开，IE9 会直接报错中断 JS 执行 —— 必须加 if (window.console) console.log(...) 防御。
