calc()在旧版浏览器中常被静默丢弃而非计算错误，ie9–11严苛校验空格与单位，firefox≤58不支持除法，safari≤15.3不支持嵌套及混合单位，android webview易截断表达式，需真机多端验证。
calc() 在旧版浏览器中“计算错误”，绝大多数情况根本不是计算错了，而是表达式压根没被解析——整条 CSS 声明被静默丢弃，最终 fallback 到初始值（比如 width: auto 或 height: 0）。真正要查的不是“算得对不对”，而是“有没有进浏览器的解析器”。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
IE9–11 的空格和单位容忍度极低
IE9 支持 calc()，但语法校验比现代浏览器严格得多：
- calc(100% - 2px) ✅ 可用
- calc(100%-2px) ❌ 整条规则失效（连 DevTools 的 Styles 面板都看不到它）
- calc(0 + 10px) ❌ 必须写成 calc(0px + 10px)，IE 不接受无单位的 0
- calc(1rem + 1em) ⚠️ 旧版 IE 对不可互转单位组合会直接跳过，建议统一用 px 或 rem
Firefox 早期版本（≤58）不支持 calc() 中的除法
像 calc(100% / 3) 这种写法在 Firefox 58 之前会被整个声明判为非法，不是结果不准，而是压根不执行。
- 正确替代：用近似值 calc(33.3333%) 或拆解为 calc((100% - 2px) / 3)（注意括号位置）
- 避免写 calc(100% / 3 - 1px)：除法未被识别，后面减法也跟着失效
- 检查方式：打开 Firefox 57 的 DevTools → Elements → 查看 computed 样式里对应属性是否为 auto 或缺失
Safari ≤15.3 对嵌套 calc() 和单位混合异常敏感
不是“算错”，是解析阶段就放弃：
- calc(calc(100% - var(--gap)) / 3) ❌ Safari 15.3 及更早版本完全不支持嵌套，整条声明无效
- calc(1em + 10px) ⚠️ 在某些 Safari 版本里会四舍五入偏差明显，尤其父容器字体缩放开启时；改用 calc(1rem + 10px) 更稳
- calc(var(--gap) * 2) ❌ 如果 --gap 定义为 20（缺单位），Safari 直接忽略，不会报错，computed 值为空
移动端 WebView（尤其 Android 4.4–6.0）会截断或重写 calc 表达式
微信、QQ、支付宝等小程序底层 WebView 常对 calc() 做预处理：
- calc(100% - 30rpx) 可能被简化成 calc(70%)（直接砍掉后半段）
- 解法：强制转义 calc(~"100% - 30rpx")（Less）或 calc(~"100vw - 20px")
- 避免混用单位：calc(100vw - 30rpx) 在多数老 WebView 中不可靠，应统一用 px 或全用 rpx
- 真机测试不可省：模拟器常表现正常，但低端安卓机上空格、引号、括号嵌套稍有不慎就失效
真正难的不是记住哪些版本不支持哪个特性，而是你写的那行 calc(100% - 20px)，在 Safari 15.2 里可能因父容器 display: grid + aspect-ratio 组合触发布局 bug，在 Firefox 里因少一个空格被跳过，在微信 WebView 里被截断成 calc(80%)——同一行代码，三种“不生效”原因，互不相干。写完必须开三台设备（Chrome、Safari、真机微信）并排验证，别信任何“兼容性表格”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
