width: calc () не работает в Firefox

Question

У меня есть следующие свойства CSS для элемента:

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

, но Firefox говорит, что они оба являются недопустимыми значениями свойств.Это ошибка в Firefox или есть новый способ сделать width: calc в Firefox?

Answer 1

Браузеры Firefox поддерживают функцию calc, как показано в разделе совместимости браузеров в нижней части этого справочника веб-разработчика mozilla , только есть специальное примечание о пробелах, как отмечено на этой странице, и официальные спецификации W3 :

Кроме того, с обеих сторон операторов + и - требуется пробел.(Операторы * и / можно использовать без пробелов вокруг них.)

Ваш пример будет работать, если добавить дополнительный пробел перед символом -, например:

width: calc(100% - 40px);

Что касается функции -moz-calc(), то, согласно официальным каналам разработки Firefox, они исключили поддержку этой функции с января 2017 года и рекомендуют использовать стандартную функцию calc().

Answer 2

-moz-calc Функция CSS была удалена с Firefox 53. Просто используйте calc и убедитесь, что между параметрами есть пробел:

правильно:

width: calc(100% - 40px);

неверно:

width: calc(100%- 40px);