结论是CSS框架本身不决定渲染模式，真正起作用的是HTML文档的DOCTYPE声明和浏览器解析行为；需通过document.compatMode判断：返回"CSS1Compat"为标准模式，"BackCompat"为怪异模式，前者正常后者危险，且DOCTYPE前任何空格、BOM或注释均会触发怪异模式。
直接看结论：CSS框架本身不决定渲染模式，真正起作用的是 HTML 文档的 DOCTYPE 声明 + 浏览器解析行为；框架只是“运行在上面的代码”，它能否正确渲染，取决于你有没有让浏览器进入标准模式、有没有统一盒模型、有没有规避 IE 的 legacy 行为。
如何确认当前页面处于哪种渲染模式
这不是框架的问题，而是 HTML 解析层的问题。关键看 document.compatMode：
-
CSS1Compat→ 标准模式（正常） -
BackCompat或undefined→ 怪异模式（危险）
打开开发者工具控制台，输入 document.compatMode 就能立刻判断。很多老项目用 CMS 输出 HTML 时悄悄加了 XML 声明（如 <?xml version="1.0" encoding="UTF-8"?>），哪怕写了 <!DOCTYPE html>，IE 也会降级为怪异模式。
Bootstrap/Tailwind 等框架在怪异模式下会出什么问题
不是框架“不兼容”，而是它默认按标准盒模型写样式，一旦浏览器用怪异模式解析，width 含 padding 和 border，所有栅格、间距、卡片宽度全乱：
立即学习“前端免费学习笔记（深入）”；
-
col-6在 Bootstrap 4+ 中本应占 50%，但在 IE8 怪异模式下可能撑满整行或错位 -
px-4+border的 Tailwind 按钮，在 Chrome 下宽 120px，在 IE6 怪异模式下变成 100px（width被吃掉 padding/border） - 表单控件如
input[type="text"]默认带box-sizing: border-box的框架（如 Bootstrap 5）仍可能失效——因为 IE8 不支持inherit，必须显式写死box-sizing: border-box
为什么加了 !DOCTYPE html 还不生效
常见静默失败原因：
-
DOCTYPE前有空格、BOM 字符或注释（哪怕只有一行<!-- comment -->）→ 触发怪异模式 -
<iframe>加载子页面时未单独声明DOCTYPE，父页标准，子页怪异 - 第三方脚本动态注入 HTML 片段，没带
DOCTYPE，导致局部渲染异常 - CMS 或模板引擎输出时自动补了
<?xml ... ?>，尤其在 PHP/ASP.NET 旧系统中高频出现
验证方式：在 iframe 内执行 document.compatMode，别只看主页面。
box-sizing 全局重置为什么必须包含伪元素
这是最容易被忽略的兼容细节。只写 * { box-sizing: border-box; } 是不够的：
-
*::before和*::after仍走默认content-box，而很多 UI 组件（如 Tooltip 箭头、Badge 圆点、进度条伪元素）依赖它们做装饰 - Firefox 和 IE9+ 都会因此出现 1–2px 偏移，尤其在高密度布局（如表格、网格）中明显
- 正确写法必须是：
*, *::before, *::after { box-sizing: border-box; } - 注意：IE8 支持
border-box，但不支持inherit，所以不能靠父级继承，必须通配显式设置
框架本身（如 Bootstrap 4/5）已内置该重置，但如果你混用自定义 CSS 或旧版 reset.css，很可能漏掉伪元素部分。
