ie引入css样式不生效的根本原因是解析链被截断：link超31个、@import超31次或4层、css规则超4095条、x-ua-compatible缺失致怪异模式，超限样式直接被忽略且无提示。
IE 浏览器引入 CSS 后样式不生效，根本原因不是“没加载”，而是解析链在多个环节被截断或降级——@import 超限、link 数量超 31 个、css 文件规则超 4095 条、甚至 X-UA-Compatible 缺失导致 IE 自动回退到怪异模式。单纯加前缀或换框架解决不了这些底层限制。
IE 对 CSS 引入数量和层级的硬性限制
IE9 及以下用 32 位整数管理样式表，导致几个关键上限：前 31 个 <link> 生效；单个 <style></style> 中最多 31 次 @import；单个 CSS 文件最多 4095 条规则；@import 嵌套最多 4 层。一旦超限，后续所有样式直接被忽略，DevTools 里连“invalid”提示都不会出现。
- 检查当前页面
中<link rel="stylesheet">标签总数，超过 31 个就必然丢弃 - 把第三方库（如 Bootstrap）的完整 CSS 拆成按需引入，避免
bootstrap.css单文件塞进 5000+ 规则 - 禁用构建工具中自动注入的调试 CSS（如 Storybook 的 preview-head.html），它们常偷偷加
<link> - 用
document.styleSheets.length在 IE 控制台手动验证实际加载数量
@supports 不是 IE 的解药，X-UA-Compatible 才是开关
@supports 在 IE 完全不支持（IE11 都不认），写它等于白写；而 IE 默认可能以 IE7 兼容模式渲染页面，哪怕你写了 display: flex，它也当没看见。必须靠 <meta> 强制触发标准模式。
- 把
<meta http-equiv="X-UA-Compatible" content="IE=edge">放在最顶部，且必须在任何<link>或<script></script>之前 - 不要写
content="IE=11"——IE11 用户升级系统后可能变成 EdgeHTML 模式，反而失效；IE=edge才保证用当前 IE 最高可用引擎 - 如果服务端返回
X-UA-CompatibleHTTP header，它优先级高于 meta 标签，需同步检查并保持一致
Autoprefixer 对 IE 的补丁作用非常有限
Autoprefixer 只补前缀，比如把 transform 编译成 -ms-transform，但它无法修复 IE11 已知的 flex 渲染 bug（如 flex-wrap: wrap 失效）、position: absolute 在 transform 父容器下的定位偏移，更不支持 aspect-ratio 这类原生不识别的属性。
- 确认
browserslist显式包含ie >= 11，而不是模糊的last 2 versions（2026 年已不含 IE） - Webpack 用户要检查
postcss-loader是否在css-loader之后执行，否则 Sass/Less 直接输出 CSS 就绕过了 PostCSS - 对
.dropdown-menu这类定位异常组件，别指望加前缀，应改用zoom: 1或position: relative+z-index重建层叠上下文
条件注释仍是 IE8 及以下最可靠的 CSS 分发机制
JS 动态切换 CSS 有 FOUC（Flash of Unstyled Content），而条件注释由 IE 原生解析，无延迟、无 JS 依赖，至今仍是 IE8 及以下唯一可控的方案。
- 用
<!--[if lt IE 9]><link href="ie8-and-down.css" rel="stylesheet"><![endif]-->，注意lt表示“小于”，lte才是“小于等于” - 不要混用条件注释和
@supports：前者只 IE 认，后者现代浏览器才认，放一起反而增加维护成本 - CDN 上的
respond.js仅修复@media查询，不能让 IE6 支持border-radius，该降级还得降级
真正卡住 IE 兼容性的，往往不是某个炫酷新特性，而是构建流程里一个没关掉的 CSS 压缩插件（删了 /* */ 注释导致条件注释失效），或是 CI/CD 环境里 browserslist 配置和本地不一致。建议每次上线前，在真实 IE 虚拟机里跑一次 document.styleSheets 和 document.querySelectorAll('style, link[rel=stylesheet]') 对比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
