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 补丁，但它要在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
