直接执行document.compatmode：返回"css1compat"为标准模式，返回"backcompat"为怪异模式；doctype必须是文件首字符，前置注释、空格或bom均触发怪异模式。
怎么一眼确认页面是标准模式还是怪异模式
直接在控制台执行 document.compatMode，返回值就是唯一可靠依据：CSS1Compat 是标准模式，BackCompat 是怪异模式。别信开发者工具里“Document Mode”这类字段——Chrome/Firefox 已彻底移除该显示；也别靠“看起来居中不对”来猜，很多差异（比如 height: 50% 在三层嵌套后才失效）根本没法肉眼定位。
为什么 a style="color:#f60; text-decoration:underline;" title= "html"href="https://m.php.cn/zt/15763.html" target="_blank">html> 必须是文件第一个字符
浏览器解析 HTML 是流式进行的，只要开头遇到任何非空白字符（注释、BOM、空格、换行），就立即锁定怪异模式。document.compatMode 在 JS 执行前已确定，后续 JS 无法挽回。
- 错误写法：
<!-- 注释 -->、<code>\n、带 UTF-8 BOM 的文件（<code>EF BB BF） - 正确写法：
必须是整个文件的第一个字节 - 构建时容易被忽略：某些 CMS、模板引擎、Webpack 插件会自动注入头部内容，这种“看不见的前置”比手误更难排查
怪异模式下最常踩的 CSS 坑有哪些
不是样式“没生效”，而是尺寸、继承、对齐逻辑全变了。核心问题在于盒模型和继承规则回退到 IE5 行为。
-
width: 200px元素加了padding: 10px和border: 2px，实际占宽仍是 200px（IE 盒模型）；标准模式下是 224px -
margin: 0 auto水平居中失效，得靠父级text-align: center - 子元素设
height: 50%，父元素没设高度 → 怪异模式下直接当 0 处理；标准模式下 fallback 到auto -
<span></span>这类行内元素设width/height在怪异模式下居然生效 - 表格中字体属性不继承父级设置，空单元格默认显示边框
近标准模式（Almost Standards Mode）是什么
这是介于标准与怪异之间的灰色地带，仅影响 table 布局中的图片尺寸计算：单元格高度会随内部图片撑开，其余行为完全符合 W3C 标准。触发条件通常是老式 DOCTYPE（如 XHTML 1.0 Transitional 不带 URI），但现代项目基本无需关心——统一用 即可避开。
真正要盯住的，从来不是“怎么修 margin 居中”，而是 DOCTYPE 是否干净落位。一个隐藏的 BOM 或构建时注入的注释，就能让整页 CSS 在两个世界之间漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
