<p>calc() 在 IE9–IE11 和旧版 Safari 中存在兼容性问题，需添加 -webkit- 前缀并在使用时注意空格和括号格式。</p>
calc() 在 IE9–IE11 和旧版 Safari（width: calc(100% - 20px) 会导致样式被忽略或回退为 auto —— 这不是 bug，是规范行为。
怎么让 calc() 有 fallback：用层叠覆盖法
浏览器遇到不认识的值会跳过该声明，但会继续解析后续同名属性。利用这点，在 calc() 前写一个兼容性更强的固定值或百分比值即可实现静默降级。
- 必须把 fallback 声明写在
calc()声明之前，顺序不能反 - 不要用
@supports包裹 fallback —— 它本身在 IE 中不被识别，反而让整个规则失效 - 避免用
!important干扰层叠逻辑，除非你明确需要强制覆盖其他来源
例如：
width: 300px; /* IE8+ 都认得 */<br>width: calc(100% - 20px); /* 支持 calc 的浏览器覆盖上一行 */
浮动布局回退时要注意清除和宽度塌陷
当 calc() 失效、退回到固定宽度时，如果原设计依赖弹性容器撑开父级，就容易出现父容器高度塌陷、兄弟元素错位等问题。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素必须配对使用
clear: both或触发 BFC（如overflow: hidden） - 固定宽度 + 浮动组合在响应式场景下极易溢出，建议搭配
max-width和box-sizing: border-box - 不要假设“只要写了 float 就一定左对齐”——IE6–7 对
float: right的处理和现代浏览器有细微差异
典型错误现象：float: left 元素在 IE9 下换行、父容器高度为 0；修复方式之一是给父容器加 overflow: hidden。
移动端 Android Browser 4.3 及更早版本的 calc() 行为差异
这个内核（WebKit 534.30）虽然声称支持 calc()，但实际只支持最简形式：不能混用单位（如 calc(50% + 1em) 会失败），也不支持嵌套函数或负数开头（calc(-10px + 100%) 被当作无效值丢弃）。
- 推荐只用
%和px组合，且确保第一个操作数是正数（如改写为calc(100% - 10px)） - 避免在
calc()中使用rem或vh—— 它们在旧 WebView 中解析不稳定 - 若需动态计算，优先考虑 JS 回退（如监听
resize后手动设style.width），而不是强求 CSS 层面全覆盖
常见错误信息：Invalid property value 出现在开发者工具的 Styles 面板中，但不会报错到控制台。
真正麻烦的不是写 fallback，而是测试时漏掉 Android 4.3 真机或 IE10 的 quirks mode —— 那些环境里 calc() 表现和文档写的完全不是一回事。
