ie11完全不解析@supports规则，整条被丢弃，因此必须将兼容样式（如flex/-ms-flexbox）写在外部，仅将现代增强样式（如grid）置于@supports内；var()在ie11中整行跳过，fallback需前置静态值。
IE11根本不解析@supports，别把它当“开关”用
很多人把@supports (display: grid)写在最外层，以为IE11会跳过里面的内容——错。IE11连@supports语法本身都不识别，整条规则直接被丢弃，根本不会进入“是否支持”的判断逻辑。结果就是：你写的回退样式（比如Flex）和增强样式（比如Grid）全被忽略，页面白屏或错乱。
正确做法是把所有IE11能认的样式写在@supports外面，现代浏览器再用@supports覆盖。例如：
/* 所有浏览器都执行（含IE11） */
.grid-container {
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
<p>/<em> 现代浏览器覆盖，IE11完全无视这块 </em>/
@supports (display: grid) {
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}</p>
注意：@supports里不能混写-ms-grid-column这类IE专属属性，现代浏览器会报错或静默失效。
display: grid在IE11里等于没写，必须手写-ms-grid双写
Autoprefixer不会把grid-template-columns: 1fr 2fr转成-ms-grid-columns: 1fr 2fr——它压根不干这事。IE11只认2011年草案里的display: -ms-grid，且fr单位、gap、grid-area全不支持。
-
grid-template-columns: 1fr 2fr→ 改成-ms-grid-columns: 1fr 2fr（仅限IE11识别，但fr在IE中实际无效，得换100px 200px或1fr 2fr加width: auto兜底） -
grid-column: 2 / -1→ 换算为-ms-grid-column: 2; -ms-grid-column-span: 3（负索引、span关键词IE全不认识） -
gap: 1rem→ 删掉，改用margin：子项加margin-right: 1rem; margin-bottom: 1rem;，再用:last-child清除末尾冗余
没有自动工具能可靠完成这套转换。Vite/Webpack里配autoprefixer: { grid: true }也只处理极简场景，且已废弃。
var(--color)在IE11里不是“fallback失效”，而是整条规则被跳过
写color: var(--text, #333);，IE11不是取#333，而是直接跳过这行CSS——因为var()函数名它根本不认识。最终颜色取决于继承值（常为黑色）或initial（透明），和你写的fallback毫无关系。
唯一有效写法是静态值前置：
:root {
--text-color: #333;
}
.button {
color: #333; /* IE11只认这行 */
color: var(--text-color); /* 现代浏览器覆盖 */
}
还要注意：postcss-custom-properties插件必须设preserve: false，否则构建后仍保留color: var(--x);，IE照旧跳过；变量定义只能在:root，且值不能含calc()或嵌套var()。
IE11默认可能跑在兼容模式，meta标签位置和协议很关键
即使写了所有降级CSS，IE11也可能因文档模式不对而直接退化到IE7引擎——此时display: flex、border-radius全失效。
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">必须放在最前面，且在任何CSS/JS引入之前 - 本地
file://协议下该meta无效，必须用HTTP服务（如http://localhost） - 企业内网常被组策略强制锁定为兼容模式，前端无法绕过，需推动IT侧调整
- F12开发者工具 → “仿真”选项卡 → 确认“文档模式”显示为“Edge”，不是数字（如“11”表示标准模式，“10”或更低表示兼容模式）
真正麻烦的不是语法怎么写，而是IE11的渲染上下文随时可能被外部策略劫持——这点比CSS本身更难控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
