IE11完全不识别@supports语法，会直接跳过整条规则而非判断为false；真正兼容IE11需将基础样式写在@supports外部、使用其支持的属性和值，并确保fallback声明在前且格式兼容。
@supports语法本身IE11根本不认识
IE11 的 CSS 解析器在 2013 年定型，而 @supports 是 CSS Conditional Rules Module Level 3 的特性，直到 2015 年才进入 Candidate Recommendation 阶段。IE11 没有实现该规范，遇到 @supports 这个 at-rule 会直接跳过整条规则——不是“判断为 false”，而是“压根不解析”，连括号里的内容都不会扫一眼。
这意味着：
-
@supports (display: grid) { ... }在 IE11 中整块消失，现代浏览器才执行其中样式 -
@supports not (color: var(--x))同样被忽略，不会触发任何 fallback 行为 - 哪怕你写
@supports selector(:has(a))，IE11 不仅不支持 :has()，连@supports这个关键词都当无效字符处理
@supports不能当IE11的兼容开关用
很多人误以为 @supports 是个“浏览器能力开关”，可以像 JS 的 if 一样分流逻辑。但事实是：它只对能识别它的浏览器生效；对 IE11 来说，它和 @unknownrule 没区别。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
- 把降级样式全塞进
@supports not (...)块里 → IE11 根本不进这个块，也没 fallback - 用
@supports (color: var(--x))检测变量，然后把所有样式包在里面 → IE11 直接丢弃全部，页面白屏或错乱 - 指望
@supports和@media嵌套来兼顾 viewport + 能力 → IE11 连外层@media都可能因语法错误（如括号不匹配）整段跳过
真正能给IE11兜底的只有三件事
IE11 不吃语法糖，只认它自己能 parse 的声明。要让它正常渲染，必须满足三个硬条件：
- 基础样式必须写在
@supports外部，且只用 IE11 支持的属性：比如display: -ms-flexbox、float、zoom: 1，而不是靠@supports去“补” - 如果用了
grid，别指望@supports (display: grid)触发降级 —— 得手动加display: -ms-grid和-ms-grid-column等旧语法，并确保每个子项位置都显式指定 - CSS 变量必须靠
css-vars-ponyfill这类 JS 补丁，但它要在</body>前执行，且不能依赖@supports包裹的逻辑（因为 IE11 根本看不到那层）
最容易被忽略的细节：顺序决定fallback是否生效
很多开发者写了 fallback 却发现 IE11 里颜色没了、背景透明了——问题不在检测逻辑，而在声明顺序。
例如这段代码：
@supports (color: oklch(0% 0 0)) {
background-color: oklch(60% 0.2 240);
}
background-color: #4a5568;
✅ 正确：IE11 忽略第一行，读取第二行
❌ 错误写法：
background-color: #4a5568;
@supports (color: oklch(0% 0 0)) {
background-color: oklch(60% 0.2 240);
}
看似一样，但在某些 Android WebView 或旧版 Chromium 中，第二行会被整条跳过——因为解析器看到不支持的值后，可能连后续同名属性都放弃处理。
所以 fallback 必须放在最前面，且只能用 #rrggbb、rgb()、rgba()、hsl() 这类 IE11 全支持的格式。任何花哨的颜色函数都不能出现在 fallback 位置。
