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

Question

我的商品具有以下 CSS 属性：

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

但是 Firefox 说它们都是无效的 属性 值。这是 Firefox 的错误，还是有新的方法来处理 width: calc 在 Firefox 中？

Answer 1

-moz-calc CSS function has been removed with Firefox 53. 只需使用 calc 并确保参数之间有白色 space：

正确：

width: calc(100% - 40px);

不正确：

width: calc(100%- 40px);

Answer 2

Firefox 浏览器支持 calc 功能，如本 mozilla web developer reference, only there is a specific note about the whitespace as noted on that page and the official W3 specs 底部的浏览器兼容性所示：

In addition, white space is required on both sides of the + and - operators. (The * and / operaters can be used without white space around them.)

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

width: calc(100% - 40px);

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