DOCTYPE缺失或错误会导致IE进入怪异模式，此时width计算退化为包含padding和border，box-sizing默认content-box；必须严格使用顶格无BOM的<!DOCTYPE html>，document.compatMode为"BackCompat"即确诊怪异模式。
DOCTYPE缺失或错误导致IE进入怪异模式
没有<!DOCTYPE html>，或者写了过时的、拼错的声明（比如<!doctype html>全小写在旧IE中可能失效），IE6–IE9会直接切换到怪异模式（Quirks Mode）。这时box-sizing默认是content-box，但width计算方式退化为“宽度 = 内容宽 + padding + border”，和标准模式完全相反。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终使用大写
<!DOCTYPE html>（HTML5标准写法，大小写敏感在部分旧解析器中有影响） - 确保它位于文档最开头——前面不能有任何字符，包括BOM、空格、注释，否则IE仍会触发怪异模式
- 用开发者工具检查渲染模式：
document.compatMode返回"CSS1Compat"才是标准模式，"BackCompat"即怪异模式
HTML5 DOCTYPE是唯一推荐且向后兼容的声明
不要用XHTML 1.0或HTML 4.01的长串声明，比如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。它们虽能触发标准模式，但增加了无谓的网络请求（部分浏览器会尝试加载DTD文件），且对现代HTML语义支持不完整。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只用
<!DOCTYPE html>——它足够短、无歧义、被所有现代浏览器和IE6+识别为标准模式触发器 - 不必担心HTML5新标签（如
<section>、<article>）在旧浏览器失效：它们只是普通元素，配合document.createElement()或html5shiv即可支持IE8及以下 - 如果项目需校验XML语法（极少数遗留系统），才考虑XHTML声明；否则纯属增加维护成本
DOCTYPE影响CSS初始值与盒模型行为
标准模式下，font-size初始值为16px，line-height为normal（约1.2），而怪异模式中某些浏览器将line-height设为1.0，造成文字挤在一起。更关键的是，width/height在标准模式中默认不包含padding和border，这是box-sizing: content-box的根源。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
box-sizing: border-box统一重置所有块级元素，避免因模式差异引发布局偏移 - 显式设置
line-height（如1.5），不要依赖normal——它在不同模式和字体下表现不一致 - 测试时打开开发者工具的“Rendering”面板（Chrome）或“DOM Explorer”（Edge），确认
document.documentMode（IE）或document.compatMode值
服务端模板或CMS自动生成DOCTYPE时的隐患
WordPress、Drupal等CMS或某些SSR框架（如Nuxt早期版本）可能在HTML模板中插入带空格或换行的<!DOCTYPE html>，或者动态拼接时混入变量导致格式错乱。这类问题不易肉眼察觉，但会让IE悄悄退回怪异模式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
curl -s URL | head -n 1检查响应首行是否严格为<!DOCTYPE html>，排除BOM或空白符 - 在Node.js模板中用
<%= doctype %>前加<%- %>（EJS）或{{{ doctype }}}（Handlebars）避免转义干扰 - 若使用Webpack + HtmlWebpackPlugin，确认
templateParameters未意外覆盖htmlWebpackPlugin.options.template中的DOCTYPE
实际项目里最容易被忽略的，是服务端注入的不可见字符和本地开发环境与生产环境模板路径不一致导致的DOCTYPE丢失。调试时别只看浏览器源码视图——它会自动修正格式，得抓原始HTTP响应体才能定位真问题。
