ie11 中 calc() 语法极严格：+/- 运算符两侧必须且仅有一个英文空格，不支持 var()、flex-basis/grid 中混用单位，失效时静默丢弃且 devtools 仅标“invalid property value”。
calc() 在 IE11 中根本不会执行数值计算——它连语法解析都失败，整条声明被静默丢弃，不是“算错”，是“没算”。
IE11 对 calc() 的空格要求比所有现代浏览器都严格
IE11 要求 + 和 - 运算符**两侧必须有且仅有一个英文空格**，缺一不可。任何偏差都会导致整条 CSS 规则失效，DevTools 里只标 Invalid property value，不报错也不提示。
-
calc(100% - 20px)✅ 所有旧引擎（含 IE11）都认 -
calc(100%-20px)❌ 缺空格，“100%-20px”被当非法 token，规则跳过 -
calc(100% -20px)❌ 减号后无空格，“-20px”被识别为负单位，不合法 -
calc(100% - 2rem - 2px)✅ 多减法也必须每处都空格
IE11 不支持 calc() 在 flex-basis 或 order 等属性中混用单位
即使语法正确，IE11 对 flex-basis: calc(100% / 3) 这类含百分比和除法的表达式也极不稳定，常解析为 0 或 NaN，导致子项堆成一列或宽度归零。
- 别在
flex-basis、grid-column-start等非尺寸主属性里强塞calc() -
width和height是相对安全的兜底位置，但依然要检查空格和单位 - IE11 下三等分布局优先用
flex: 0 0 33.3333%+box-sizing: border-box+ 固定边框/内边距补偿
变量插值和自定义属性在 IE11 中完全不可用
IE11 不支持 var(--x)，也不支持 Sass/Less 编译后的 calc(100% - #{$gap}) 如果 $gap 是纯数字（如 $gap: 20），输出会变成 calc(100% - 20)，单位缺失，直接失效。
- Sass 中必须写
$gap: 20px，再用calc(100% - #{$gap}) - 绝对不要依赖
var(--gap)做计算，IE11 会忽略整条声明 - 若需动态值，降级方案只能是 JS 注入 class 或内联 style：
element.style.width = (containerWidth - 40) + 'px';
最麻烦的不是写错，而是失效时毫无征兆——布局突然塌陷，第一反应不该是“逻辑错了”，而是打开 DevTools 检查那条声明是否标着 Invalid property value，然后逐字核对空格、单位、括号和构建产物里有没有残留的 var() 或未展开的 calc()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
