CSS3 calc() не работает в последнем хроме

Я заметил, что мое использование функции CSS3 calc() как устройства для width не работает в последней версии Chrome.

В инструментах разработчика Chrome правило с calc() имеет strikethrough через него и восклицательный знак в желтом треугольнике слева от него. Это означает, что свойство или значение не распознаются.

Как мне заставить его работать в современных браузерах? Потому что это значение, а не свойство, куда идут префиксы поставщика?

Обновление:

Когда я говорю, что это не работает, я имею в виду, что в Chrome Dev Tools говорится, что он не распознает мое использование width: calc(100%-88px);. Как я узнаю, что это не узнает? Из-за значка прокрутки и желтого треугольника рядом с правилом стиля в инструментах хром-dev.

Обновление 2:

Вот скриншот того, что я вижу в инструментах Chrome dev: http://cl.ly/image/2g3W1l2u022e

Ответы

Ответ 1

Проблема в вопросе была вызвана отсутствием пространства вокруг оператора вычитания.

Обратите внимание, что грамматика требует пробелов вокруг двоичных '+ и' - операторы. Операторы '* и'/не требуют пробелов.

https://www.w3.org/TR/css3-values/#calc-syntax

Я предполагаю, что это должно четко различать операторы и подписанные числа.

Плохо: calc(100%-88px)
Хорошо: calc(100% - 88px)

Как я узнаю, что это не узнает? Из-за зачеркивания и значок желтого треугольника рядом с правилом стиля в chrome dev инструменты.

Свойство strike при просмотре в инструментах разработчика Chrome может быть действительным, но переопределенным; однако свойство, пробитое и с предупреждающим значком треугольника рядом с ним, недействительно.

Другие заметки

  • Chrome поддерживает calc() для довольно долгое время (подтверждено в OSX и Windows).
  • Chrome может не поддерживать блоки видовых экранов, такие как vh/vw внутри calc(). По состоянию на конец 2014 года есть активность по ее реализации, но связанная ошибка по-прежнему открыта.
  • В моем тестировании Safari поддерживает calc() с префиксом поставщика -webkit для OSX, но не Windows.
  • IE9 + поддерживает calc() без префикса поставщика.
  • FF поддерживает calc() без префикса поставщика.

Ответ 2

Используйте префикс -webkit и пробелы вокруг оператора

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);

Ответ 3

Я немного боролся с свойством calc и работал только под подходом.

-webkit-calc(~'100% - 40px'); // good: result 395px (in my application)

все вышеприведенные предложения, например:

-webkit-calc(100% - 40px); // bad: result 60%

закончилось неправильным расчетом, например, 60%.

Надеюсь, это поможет кому-то.