calc(100% - 20px) 在旧版 safari、ios 和 android webview 中常静默失效，主因是混合单位求值时机不一致及盒模型理解差异，配合 box-sizing 和 flex/grid 替代方案更可靠。
calc() 里混用 % 和 px 在现代浏览器基本可用，但旧版 Safari、Android WebView 或某些 iOS 场景下会静默失效——不是报错，而是整条 CSS 规则被跳过，布局直接崩。
为什么 calc(100% - 20px) 有时不生效
根本原因不是语法错，而是浏览器对混合单位的求值时机和基准理解不一致：% 依赖父容器宽度，px 是绝对值，两者在 layout 阶段可能不同步。尤其在 Safari 15.4 之前、iOS 15.3 及更早系统中，calc(100% - 20px) 可能被当成无效声明丢弃。
- DevTools 显示
Invalid property value，但控制台无提示 - Chrome 调试正常，切到真机就错位或撑出容器
- Android 4.4 WebView 完全不识别这种写法
- 如果
%基准来自 transform 缩放后的父容器，calc()仍按原始尺寸计算，视觉偏差明显
用 box-sizing: border-box 配合 calc() 控制总宽
calc() 算出来的是 content 区宽度，不是元素总宽。如果你写了 width: calc(100% - 40px)，又加了 padding: 10px 和 border: 2px，默认 box-sizing: content-box 下，总宽 = content + padding + border，必然溢出。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 想让“总宽 = 100% - 40px”，必须设
box-sizing: border-box - 设了
border-box后，calc()里就别再手动减 padding/border，否则重复扣除 - 若坚持用
content-box，就得把所有尺寸塞进calc()：比如width: calc(100% - 2 * 10px - 2 * 2px)
CSS 变量嵌套导致 calc() 失效的典型坑
Safari 15.4 之前不支持 calc(calc(100% - 20px) / 2) 这种嵌套，整条规则静默丢弃；PostCSS 的 postcss-custom-properties 也不会自动展开 calc(var(--gap)) 中的变量。
- 改用拆解式变量：
--inner-width: calc(100% - 40px); width: calc(var(--inner-width) / 3) -
var(--gap)必须带单位，--gap: 20px✅，--gap: 20❌（加减运算会失效） -
calc(var(--scale) * 1rem)可行，但calc(100% * var(--scale))在部分旧引擎中不认 - PostCSS 降级时，需手动把关键
var()替换为静态值，不能依赖插件自动处理
替代方案比硬刚 calc() 更可靠
当目标是“填满剩余空间”或“避开固定侧边栏”，calc() 不是唯一解，且容易因盒模型、单位混用、变量嵌套出问题。
- 优先用
flex：父容器display: flex，主内容区flex: 1，侧边栏flex: 0 0 240px - 或用
grid：grid-template-columns: 240px 1fr，天然规避计算误差 - 需要视口减去 header 高度时，
height: calc(100vh - 60px)不如max-height: 100vh; height: 100%+margin-top: -60px组合稳定 - 复杂响应式场景建议上
container查询 +clamp()，比多层calc()更易维护
真正麻烦的不是写错一个 calc() 表达式，而是它失效时没有任何明确反馈——布局偏移、内容溢出、点击区域错位，都可能是某条被浏览器悄悄跳过的 calc() 规则在作祟。查问题时先看 Safari/旧 iOS 真机表现，再检查变量单位和 box-sizing 是否匹配，比反复调表达式更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
