CSS3 calc (100% -88px) funktioniert in Chrome nicht

Mir ist aufgefallen, dass meine Verwendung des CSS3 calc()als Einheit für fungiertwidth die neueste Version von Chrome nicht funktioniert.

In den Chrome - Entwicklertools, die Regel mit calc()hat ein durchgestrichener durch und ein Ausrufezeichen in einem gelben Dreieck auf der linken Seite davon. Dies signalisiert, dass die Eigenschaft oder der Wert nicht erkannt wird.

Wie kann ich es in modernen Browsern zum Laufen bringen? Wohin gehen die Herstellerpräfixe, da es sich um einen Wert und nicht um eine Eigenschaft handelt?

Aktualisieren:

Wenn ich sage, dass es nicht funktioniert, bedeutet dies, dass Chrome Dev Tools sagt, dass es meine Verwendung nicht erkennt width: calc(100%-88px);. Woher weiß ich, dass es es nicht erkennt? Wegen des Durchgestrichenen und des gelben Dreiecksymbols neben der Stilregel in Chrome Dev Tools.

Das Problem in der Frage wurde durch den Platzmangel um den Subtraktionsoperator verursacht.

Beachten Sie, dass die Grammatik Leerzeichen um binäre '+' und '-' Operatoren erfordert. Die Operatoren '*' und '/' benötigen keine Leerzeichen.

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

^{Ich spekuliere, dass dies die Unterscheidung zwischen Operatoren und vorzeichenbehafteten Nummern verdeutlichen soll.}

Schlecht: calc(100%-88px)
Gut: calc(100% - 88px)

Woher weiß ich, dass es es nicht erkennt? Wegen des Durchgestrichenen und des gelben Dreiecksymbols neben der Stilregel in Chrome Dev Tools.

Eine Eigenschaft, die beim Anzeigen in den Entwicklertools von Chrome angezeigt wird , ist möglicherweise gültig, wird jedoch überschrieben. jedoch schlug eine Eigenschaft , durch und mit einem Warndreieck Symbol daneben ist ungültig.

Weitere Hinweise

• Chrome unterstützt calc()seit geraumer Zeit (bestätigt unter OSX und Windows).
• Chrome unterstützt möglicherweise keine Ansichtsfenstereinheiten wie vh / vw im Inneren calc(). Ab Ende 2014 gibt es Aktivitäten zur Implementierung, aber den damit verbundenen Fehler ist noch offen.
• In meinen Tests unterstützt Safari calc()das -webkitHerstellerpräfix unter OSX, jedoch nicht unter Windows.
• IE9 + unterstützt calc()ohne Herstellerpräfix.
• FF unterstützt calc()ohne Herstellerpräfix.

Verwenden Sie -webkitPräfixe und Leerzeichen um den Operator

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

Ich kämpfte calcein wenig mit Eigentum und nur unter Ansatz funktionierte.

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

alle oben genannten Vorschläge wie:

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

endete mit einer falschen Berechnung wie 60%.

Hoffe es hilft jemandem.