IE10–11中calc()不支持vw与px等混合单位，需用层叠法：先写IE兼容的静态值（如width: 960px），再写现代浏览器用的calc()声明（如width: calc(100vw - 40px)），IE会忽略含vw的整条声明，现代浏览器则覆盖。
IE10–11中calc()不支持vw混合单位时怎么办
IE10–11确实支持calc()，但仅限于同类型单位混合（如px + px、% + %），一旦混用vw和px（例如calc(100vw - 20px)），整个表达式会被直接忽略——不是计算错误，而是整条CSS声明被丢弃。
这不是语法写错，是IE的解析器直接拒识。所以不能只靠calc()加前缀或重写顺序来修复。
- 必须为IE提供独立的、不含混合单位的后备值
- 后备值需用
px或%等IE完全支持的单位表达近似效果 - 利用层叠优先级：把IE友好的声明写在
calc()之前，让IE读到就停，现代浏览器则覆盖它
怎么写才能让IE用后备值、其他浏览器用calc()
关键不在媒体查询或JS检测，而在CSS声明顺序和浏览器兼容性解析逻辑：IE遇到无法识别的值（如含vw的calc()）会跳过整条声明；而现代浏览器按顺序解析，后写的生效。
正确写法是「先写IE安全的静态值，再写带calc()的现代声明」：
立即学习“前端免费学习笔记（深入）”；
width: 960px; /* IE10–11读到这里，后面整条width声明都忽略 */ width: calc(100vw - 40px); /* Chrome/Firefox/Edge 12+ 覆盖上面的值 */
注意：width必须重复写两次，且顺序不能颠倒。IE不会“降级执行”calc()里的100vw部分，它根本不会尝试解析整条值。
- 不要用
@supports (width: calc(100vw))做包裹——IE11根本不支持@supports查calc混合单位 - 避免在同一个声明里混用
!important，容易干扰层叠逻辑 - 如果涉及
height或padding，同样适用该模式，但需单独为每个属性设置后备
calc()里用em/rem在IE中是否安全
IE10–11对calc()中使用em或rem基本支持，但有隐性坑：当父元素font-size为0或未定义时，rem可能被解析为0，导致calc(1rem + 10px)实际变成calc(0px + 10px)。
- 纯
px+em组合（如calc(1em + 4px)）在IE11中通常可用，但IE10存在偶发失效 - 若设计依赖精确字号缩放，建议后备值也基于
em（如1.25em），而非硬写px，否则响应断层更明显 - 测试时务必在IE11的文档模式（F12 → 文档模式）设为“Edge”，否则可能误判为IE7/8行为
为什么不用JavaScript动态计算替代CSScalc()
可以，但没必要——除非你已经在用JS控制布局，否则为兼容IE引入运行时计算反而增加复杂度和FOUC风险。
CSS后备方案本质是「静态近似」，不是像素级精确还原。比如100vw - 40px在桌面端≈960px，在小屏≈320px，这时一个max-width: 960px; width: 100%配合box-sizing: border-box往往比JS监听resize更轻量可靠。
- JS方案要处理
resize节流、初始渲染时机、服务端渲染（SSR）下无window等问题 - CSS后备只需多一行声明，零运行时开销，且所有IE版本（包括IE9）都能回退到最简值
- 真正难的是判断「哪里值得加后备」：通常只在容器宽度、栅格间距、头部高度等影响整体结构的地方加，非关键装饰性尺寸可直接放弃IE适配
IE的calc()限制不是bug，是它解析器的能力边界。接受这个前提，用层叠兜底，比强行让它“理解”混合单位更实际。
