怪异模式是浏览器放弃标准、退回上世纪90年代渲染逻辑的紧急fallback；触发时document.compatMode返回"BackCompat"，盒模型、浮动、字体继承等行为全部失准；唯一可靠防范方式是确保<!DOCTYPE html>为文件第一行首个字符，无空格、注释或BOM。
怪异模式不是“兼容模式”，而是浏览器放弃标准、退回上世纪90年代渲染逻辑的紧急 fallback —— 一旦触发，document.compatMode 返回 "BackCompat"，所有盒模型、浮动、字体继承、表格行为都会失准，不是“有点不一样”，是“完全不可预测”。
怎么一眼判断页面进了怪异模式
打开控制台，执行：document.compatMode。返回 "BackCompat" 就坐实了；返回 "CSS1Compat" 才算安全。
常见错误现象：
- IE6/7/8 中
div宽度莫名变窄或撑开，padding和border被算进width里 -
table内文字不继承父级font-size，哪怕写了也无效 -
display: inline-block元素间凭空出现 4px 间隙，且无法用font-size: 0消除（怪异模式下该 hack 失效）
什么操作会直接触发怪异模式
根本原因：浏览器在解析 HTML 时，没看到合法的 <!DOCTYPE html>，或它前面混入了任何非空字符。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<!DOCTYPE html>缺失或写成<!doctype html>（大小写不敏感，但缺失更常见） -
<!DOCTYPE html>前有 XML 声明：<?xml version="1.0" encoding="utf-8"?>→ IE6 直接触发 -
<!DOCTYPE html>前有注释：<!-- for IE -->→ IE6/7 触发 -
<!DOCTYPE html>前有空格、换行、BOM 字符（尤其 UTF-8 with BOM 文件）→ 所有旧 IE 触发
注意：<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 不能修复怪异模式 —— 它只影响 IE 的文档模式切换，前提是已经处于标准模式。
如何强制让页面进入标准模式
唯一可靠做法：确保 <!DOCTYPE html> 是整个文件的**第一行、第一个字符**，前后无空格、无注释、无 BOM。
- 用编辑器检查文件编码，保存为
UTF-8 without BOM（VS Code 默认可能带 BOM，需手动改） - 构建流程中加校验脚本，读取文件头 20 字节，断言是否以
<!DOCTYPE开头 - 服务端响应头加
X-Content-Type-Options: nosniff，防 MIME 类型嗅探误判 - 不要依赖
<meta>或 HTTP 头覆盖 Doctype 缺失 —— 它们生效的前提是 Doctype 已存在
为什么现代项目仍要防怪异模式
不是为了兼容 IE8，而是因为：
- 内网系统、政企老旧终端仍大量运行 IE11 的兼容视图（本质是 IE7 渲染引擎 + 怪异模式）
- 某些 Electron 应用或 WebView 嵌入场景，默认未设 Doctype，一加载就进怪异模式
-
iframe加载无 Doctype 的 HTML 片段，会独立触发怪异模式，污染父页面布局 - Webpack/Vite 的 HTML 插件若配置不当（如模板注入逻辑在 Doctype 前插入内容），也会意外触发
最隐蔽的坑：本地开发时一切正常，上线后因构建工具注入分析脚本或 SEO 标签，把 Doctype 顶到了第二行 —— 这类问题必须靠自动化 lint 拦截，人工肉眼几乎无法发现。
