CSS3 calc () ne fonctionne pas dans le dernier chrome

J’ai remarqué que mon utilisation de la fonction CSS3 calc() car l’unité de width ne fonctionnait pas dans la dernière version de Chrome.

Dans les outils du développeur Chrome, la règle avec calc() est barrée et un point d’exclamation est placé à gauche d’un sortingangle jaune. Cela signale que la propriété ou la valeur n’est pas reconnue.

Comment puis-je le faire fonctionner dans les navigateurs modernes? Parce que c’est une valeur et non une propriété, où vont les préfixes du fournisseur?

Mettre à jour:

Quand je dis que cela ne fonctionne pas, je veux dire que Chrome Dev Tools dit qu’il ne reconnaît pas mon utilisation de la width: calc(100%-88px); . Comment puis-je savoir qu’il ne le reconnaît pas? À cause du barré et de l’icône en forme de sortingangle jaune à côté de la règle de style dans les outils de développement de chrome.

Mise à jour 2:

Voici une capture d’écran de ce que je vois dans les outils de développement Chrome: http://cl.ly/image/2g3W1l2u022e

Le problème dans la question a été causé par le manque d’espace autour de l’opérateur de soustraction.

Notez que la grammaire requirejs des espaces autour des opérateurs binarys ‘+’ et ‘-‘. Les opérateurs ‘*’ et ‘/’ ne nécessitent pas d’espace.

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

Je suppose que cela vise à clarifier la distinction entre les opérateurs et les numéros signés.

Mauvais: calc(100%-88px)
Bon: calc(100% - 88px)


Comment puis-je savoir qu’il ne le reconnaît pas? En raison du barré et de l’icône en forme de sortingangle jaune à côté de la règle de style dans les outils de développement de chrome.

Une propriété frappée lors de l’affichage dans les outils de développement de Chrome peut être valide mais remplacée; cependant, une propriété traversée par un sortingangle d’avertissement à côté de celle-ci est invalide.


Autres notes

  • Chrome prend en charge calc() depuis un certain temps (confirmé sur OSX et Windows).
  • Chrome ne prend peut-être pas en charge les unités de fenêtre d’affichage telles que vh / vw dans calc() . À la fin de 2014, il y a une activité sur la mise en œuvre, mais le bogue associé est toujours ouvert.
  • Lors de mes tests, Safari supportera calc() avec le préfixe du fournisseur -webkit sur OSX mais pas Windows.
  • IE9 + prend en charge calc() sans préfixe fournisseur.
  • FF prend en charge calc() sans préfixe fournisseur.

Utilisez le préfixe -webkit et les espaces autour de l’opérateur

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

J’ai eu du mal avec la propriété calc un peu et seulement l’approche ci-dessous a fonctionné.

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

toutes les suggestions ci-dessus comme:

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

fini avec un mauvais calcul comme 60%.

J’espère que ça aide quelqu’un.