ie11不解析var(--x)、display:grid等现代语法，整条声明被静默丢弃；必须前置静态值、手动降级为-ms-flexbox/-ms-grid、用margin替代gap、设preserve:false移除var()、变量限于:root纯常量。
IE11 不解析 var(--x)、不支持 display: grid、跳过 animation 复合写法、静默丢弃含 calc() 或 gap 的整条声明——不是样式“没生效”，而是浏览器根本没读那行 CSS。必须前置静态值、手动降级关键语法、切断所有现代特性依赖。
IE11 里 var(--x) 为什么连 fallback 都无效？
IE11 连 var() 函数名都不认识，遇到 color: var(--text, #333); 直接跳过整条规则，最终取继承色（常为黑色）或 initial（背景变透明）。var(--x, #fff) 在 IE 中纯属幻觉。
-
唯一有效写法：静态值必须前置，
var()仅作覆盖，例如：color: #333; color: var(--text-color, #333); -
postcss-custom-properties必须设preserve: false，否则构建后仍保留color: var(--x);，IE 照样跳过 - 变量定义必须在
:root，且值只能是纯常量（--c: red;✅，--s: calc(1rem + 2px);❌，--d: var(--b);❌） -
@supports (color: var(--_))在 IE11 中本身不被识别，整条规则被忽略，不能替代静态兜底
Flex 布局在 IE11 中突然失效或子项挤成一排？
IE11 只认 display: -ms-flexbox（旧草案），单写 display: flex 等于没写；flex: 1 被解析为 flex: 1 1 0%，导致子项宽度坍缩、换行失效。
- 必须同时声明：
display: -ms-flexbox; display: flex; -
flex-direction补-ms-flex-direction，justify-content补-ms-flex-pack（比-ms-justify-content更稳） - 禁用
flex: 1，改用显式值：flex: 0 0 33.333%（小数点不能省）、flex: 0 0 50% - 父容器需设明确高度（
height: 100vh或min-height: 200px），子项移除height/max-height，否则撑不满
Grid 和 gap 在 IE11 中直接消失？
display: grid 在 IE11 中完全无效；gap 没有对应前缀（-ms-gap 是非法属性），整条声明被丢弃；Autoprefixer v9+ 已放弃自动转换 Grid 语法，只在你手动写了 display: -ms-grid 的前提下补极少数配套属性。
-
display: grid→ 改用display: -ms-grid; display: grid;，并手写-ms-grid-columns和-ms-grid-rows -
grid-column: 1 / -1或span 3不会生成任何-ms-属性，必须换算为正整数范围，如-ms-grid-column: 1; -ms-grid-column-span: 3; -
gap→ 改用margin：封装.grid-gap(@size) { margin-right: @size; margin-bottom: @size; }或用 Tailwind 的space-x/space-y - 响应式布局中，IE11 不会动态重算
flex-basis或grid列数，每个断点都得显式重写
动画和复合属性在 IE11 中静默失败？
IE11 解析器极其脆弱：animation: name 0.3s ease 这类复合写法整条被跳过；@keyframes 块内只要出现一个不支持的语法（如 var()、calc()、filter），整个动画规则失效。
- 必须拆解为单值属性：
-ms-animation-name、-ms-animation-duration、-ms-animation-timing-function -
animation-timing-function只认ease、linear、ease-in、ease-out、ease-in-out；cubic-bezier()会被丢弃 -
@keyframes名称只能是小写字母/下划线/数字（slidein✅，slideIn❌，slide-in❌） - 移除
will-change: transform，改用transform: translate3d(0, 0, 0)触发硬件加速（translateZ(0)兼容性更差）
真正麻烦的不是某一条规则写错，而是 IE11 对“整条声明”的处理逻辑和现代浏览器完全不同：它不降级、不警告、不 fallback，只是默默跳过。所有修复动作都得在构建产物里验证——打开编译后的 CSS 文件，搜索 -ms-、检查有没有残留的 var()、确认 gap 是否已转为 margin。开发服务器热更新里的样式不可信，只有构建后的真实输出才作数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
