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?
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.
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
calc()
depuis un certain temps (confirmé sur OSX et Windows). calc()
. À la fin de 2014, il y a une activité sur la mise en œuvre, mais le bogue associé est toujours ouvert. calc()
avec le préfixe du fournisseur -webkit
sur OSX mais pas Windows. calc()
sans préfixe fournisseur. 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.