Почему функция CSS calc() не работает для меня?

Ответ 1

Оператор "-" должен быть окружен пробелами:

#abc{width:calc(100% - 20px)}

Цитата Информация о MDN на calc(): "Примечание: Операторы + и - всегда должны быть окружены пробелами. Операнд calc (50% -8px) например, будет анализироваться как процент, за которым следует отрицательная длина, недопустимое выражение, в то время как операнд calc (50% - 8px) представляет собой процент, за которым следуют знак минус и длина."

Формальное утверждение в этом выражается в разделе 8.1.1 модуля CSS значений и блоков 3-го уровня CR.

Ответ 2

Все современные браузеры, кроме поддержки браузера для Android, calc(), что упрощает принятие. Но обратите внимание, что это может сильно повлиять на макет и последующее нарушение вашего дизайна на неподдерживаемых браузерах.

Вы должны использовать его с объявлением возврата, поэтому он не разбивает браузеры, которые его не поддерживают.

width: 500px; /** older browsers **/ 

width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/

width: -moz-calc(50% - 20px); /** FF 4-15  **/

width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/

Ответ 3

Поддерживается IE9, IE10 и Safari 6.0 (с использованием префикса -webkit-). Вы можете проверить всю таблицу поддержки здесь: http://caniuse.com/#feat=calc

Ответ 4

Реализация IE9 метода calc() не работает с элементами display: table.

Вы можете обойти это, обернув div вокруг него (это display: block) и сделав ширину элемента display: table внутри width: 100%. Вы применяете ширину calc d к окружающему div.

Ответ 5

С последней версией Modernizr вы можете проверить поддержку csscalc. Просто используйте Modernizr.csscalc. Эта функция вернет true, если она поддерживается, и false, если это не так. В вашем случае у вас будет это в вашем css:

#abc {  width:calc(100% - 20px); }

и в вашем javascript (здесь я использую jQuery)

if(!Modernizr.csscalc){
    $('#abc').width($(PARENT_EL).width() - 20)
}

BTW. Лучше стилизовать свои элементы с именами классов, а не с идентификаторами. Идентификатор элемента должен использоваться только для его таргетинга через javascript.

Ответ 6

Вам нужны пробелы, а также, если вы используете формат препроцессора, это выглядит как calc(~"100% - 20px") или может не работать.

Ответ 7

Как и то, что IE9 поддерживает CSS calc() и что вы должны помещать пробелы в минус в calc.

Хотя я знаю, что у меня была очень похожая проблема с IE9, где width: 50% дал другой результат, чем width: calc(50%). Оказалось, что это связано с типом display, который был установлен в inline-table. Сменив его на inline-block, сделанный calc() снова работает. Обратите внимание, что http://caniuse.com/#feat=calc отмечает поддержку IE9 calc() как "частичную".

Ответ 8

Прежде всего, должны быть пробелы до и после + или -. Вы также можете использовать *, / и объединить их. Пример:

.gen {
  height: 100px;
  background-color: blue;
  border: solid 1px black;
}

.nocalc {
  width: 50%;
}

.calc {
  width: calc(100% / 4 * 2 + 50px - 40px); 
  /* 50% + 10px */
}

<div class="gen nocalc"></div>
<div class="gen calc"></div>