<meta http-equiv="X-UA-Compatible">必须置于<head>最开头（无BOM、无注释、无空格、无其他标签），且content="IE=edge"；国产双核浏览器需额外添加<meta name="renderer">；预览环境常因服务器或IDE干扰导致失效。
meta http-equiv="X-UA-Compatible" 必须放在 最开头
IE（8–11）在解析 HTML 时，一旦开始构建 DOM 树，就不再读取后续的 <meta http-equiv="X-UA-Compatible">。如果它前面有注释、空行、<title>、甚至 UTF-8 BOM，整个声明会被跳过——页面直接退回到 Quirks 模式或 IE5 文档模式，JS 行为和 CSS 渲染大面积异常。
常见失效场景：
-
<meta>写在<title>后面 → 完全被忽略 - 开头含空格或
<!-- 注释 -->→ 实际排第二，失效 - 文件保存为 UTF-8 with BOM → BOM 被当作文本内容，
<meta>不再是第一个标签
content 值选 IE=edge，别用 IE=7/IE=EmulateIE7 这类旧值
IE=edge 是唯一仍具实际意义的取值：它告诉 IE 使用当前安装的最高版本所支持的最新标准模式，避免因用户升级 IE 导致行为突变。其他值已基本失效或受限：
-
IE=7/IE=8：IE11 后期更新已屏蔽，设置后无效果 -
IE=EmulateIE7：依赖<!DOCTYPE>，但 IE11+ 不再响应，且兼容性不如IE=edge稳定 -
chrome=1：Chrome Frame 已于 2014 年停用，纯冗余字段
国产双核浏览器要用 <meta name="renderer"> 单独控制
360、QQ、搜狗等双核浏览器不会识别 X-UA-Compatible，必须额外加 <meta name="renderer"> 才能生效。这个标签只对国产壳浏览器起作用，且必须写在 <head> 中靠前位置（不要求绝对第一，但不能太靠后）。
立即学习“前端免费学习笔记（深入）”；
- 要强制走 WebKit/Chromium 内核 →
<meta name="renderer" content="webkit"> - 要强制走 IE 兼容内核（如网银页）→
<meta name="renderer" content="ie-comp"> - 要强制走 IE 标准内核 →
<meta name="renderer" content="ie-stand">
注意：content 值区分大小写，webkit 不能写成 WebKit 或 Webkit；该标签对 Chrome、Firefox、Edge（Chromium 版）完全无效。
预览环境里最容易被忽略的三件事
本地开发或测试服务器预览时，X-UA-Compatible 失效概率极高，不是代码写错，而是环境干扰：
- 静态文件服务器（如 Python
http.server、Live Server 插件）默认不发 HTTP Header，只能靠 meta 标签，此时位置错误 = 直接失效 - Webpack Dev Server 或 Vite 默认也不设
X-UA-CompatibleHTTP Header，得手动配置headers项才能覆盖 meta 的优先级 - 某些 IDE 内置预览器（如 VS Code Live Preview）会注入自己的
<head>内容，把你的<meta>推到后面，导致 IE 忽略
真要验证是否生效，最可靠方式是打开 IE 的 F12 开发者工具 → 切换到“仿真”标签页 → 查看“文档模式”右侧显示的数值，而不是只看页面表现。
