DOCTYPE缺失或错误会直接触发怪异模式，浏览器默认降级至IE5.5渲染逻辑，导致box-sizing、width计算、浮动清除等全部退化，须以<!DOCTYPE html>严格置于首字节来规避。
DOCTYPE缺失直接触发怪异模式
浏览器不是“主动变怪异”，而是没看到<!DOCTYPE html>就默认降级。IE6–8只要HTML开头没有完整、无空格、无注释的<!DOCTYPE html>，立刻启用怪异模式——它不报错，也不提示，只默默换一套盒模型规则。
常见踩坑点：
- 文件开头有BOM字符或空行，
<!DOCTYPE html>实际不在第一字节位置 - 用了过时的DTD，比如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，IE8及以下仍判为怪异 - 某些CMS或模板引擎动态拼接HTML时，悄悄在
<!DOCTYPE>前注入XML声明（如<?xml version="1.0"?>），IE9+也会被迫回退
IE6–8怪异模式下width语义完全不同
这不是bug，是历史设计：IE5时代就把width定义为“内容 + padding + border”的总宽，而W3C标准要求width仅指content。IE6在标准模式下已支持W3C语义，但一旦进怪异模式，就退回老逻辑。
后果很直接：
立即学习“前端免费学习笔记（深入）”；
-
width: 200px; padding: 10px; border: 1px→ IE怪异模式总宽=200px，Chrome标准模式总宽=222px - 父容器设
width: 100%，子元素一加padding就溢出，flex换行、栅格错位全跟着发生 - 用
document.compatMode可验证：返回"BackCompat"即确认处于怪异模式
box-sizing: border-box只是补救，不是根源解法
加*, *::before, *::after { box-sizing: border-box; }能统一尺寸计算，但它掩盖了问题——页面仍在怪异模式下运行。这意味着除了盒模型，还有其他隐患：
- 表格高度计算异常（IE7怪异模式下
<table height="100px">行为与标准模式不一致） - 行内元素
vertical-align: baseline对齐基准线偏移 -
<select>、<button>等表单控件的UA样式不受全局box-sizing影响，必须单独声明 - iframe内部文档若未声明DOCTYPE，其子上下文仍走怪异模式，主页面的重置无效
现代项目里最容易被忽略的隐性触发点
即使你写了正确的<!DOCTYPE html>，这些地方仍可能偷偷切回怪异模式：
- 通过
document.write()或innerHTML动态插入HTML片段时，没带DOCTYPE，新节点继承的是当前文档模式，但部分旧IE会为碎片内容新建一个隐式怪异上下文 - Shadow DOM中未显式设置
mode: "open"且宿主文档为怪异模式时，部分Polyfill行为不可靠 - 使用
iframe srcdoc时，srcdoc内容若没包含<!DOCTYPE html>，IE11会按怪异模式渲染该iframe
真正要稳，得从HTML源头卡死：每个独立可访问的HTML文档（包括弹窗、iframe、邮件模板）都必须以<!DOCTYPE html>开头，且不能有任何前置字符。其他所有CSS/JS补救，都是在给这个前提兜底。
