width：calc（）在Firefox中不起作用

Posted 2021-03-30

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

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

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

答案

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

正确：

width: calc(100% - 40px);

不正确的：

width: calc(100%- 40px);

另一答案

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

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

你的例子可以通过在-符号前面添加一个额外的空格来实现，如下所示：

width: calc(100% - 40px);

至于-moz-calc()功能，根据官方的Firefox开发渠道，他们removed自2017年1月起支持此功能，并建议使用标准的calc()功能。