宽度：calc() 在 Firefox 中不起作用答案

【问题标题】：width: calc() not working in Firefox宽度：calc() 在 Firefox 中不起作用
【发布时间】：2018-11-16 08:02:19
【问题描述】：

我在一个项目上有以下 CSS 属性：

width: calc(100%- 40px);
width: -moz-calc(100% - 40px);

但是 Firefox 说它们都是无效的属性值。这是 Firefox 的一个错误，还是有一种新的方法来处理宽度：Firefox 中的计算？

【问题讨论】：

参见：developer.mozilla.org/en-US/docs/Web/CSS/calc "注意：+ 和 - 运算符必须用空格括起来。例如，calc(50% -8px) 将被解析为百分比后跟负长度——一个无效的表达式——而 calc(50% - 8px) 是一个百分比，后跟一个减法运算符和一个长度。同样，calc(8px + -50%) 被视为一个长度，后跟一个加法运算符和一个负百分比。"
calc(100%- 40px); 中需要一个空格。例如：calc(100% - 40px);

【解决方案1】：

Firefox 浏览器支持calc 功能，如该mozilla web developer reference 底部的浏览器兼容性所示，只有该页面上注明的空白和official W3 specs：

此外，+ 和 - 运算符的两边都需要空格。（可以使用 * 和 / 操作符，它们周围没有空格。）

您的示例可以通过在 - 符号前面添加一个额外的空格来工作，如下所示：

width: calc(100% - 40px);

至于-moz-calc()功能，根据火狐官方开发频道removed从2017年1月开始支持该功能，推荐使用标准的calc()功能。

【讨论】：

好问题！我的回答包含浏览器兼容性图表的链接，以及官方 W3 文档的摘录。我在提交之前没有刷新我的浏览器，所以我不知道你发表了评论，并且在我输入答案时有人提供了答案，因此我的答案虽然速度较慢，但链接更多，对你来说似乎是多余的¯_(ツ)_ /¯。感谢@j08691 指出这一点！

【解决方案2】：

-moz-calc CSS 函数 has been removed 与 Firefox 53。只需使用 calc 并确保参数之间有空格：

正确：

width: calc(100% - 40px);

不正确：

width: calc(100%- 40px);

【讨论】：