CSS3 calc(100%-88px)がChromeで動作しない [重複]。

質問

の使い方に気づいたのですが、CSS3 の calc() 関数を width が最新版のChromeで動作しない。

Chromeのデベロッパーツールで、ルールに calc() には 取り消し線 があり、その左側に黄色い三角形のエクスクラメーションマークがあります。これは、プロパティや値が認識されないことを知らせているのです。

どうすればモダンブラウザで動作するようになりますか？プロパティではなく値なので、ベンダープレフィックスはどこに行くのでしょうか。

更新しました。

動かないというのは、Chrome Dev Toolsが私の使い方を認識していないと言っているということです width: calc(100%-88px); . どうすれば認識されないとわかるのでしょうか？Chrome Dev Toolsのスタイルルールの横には、取り消し線と黄色の三角形のアイコンが表示されているからです。

どのように解決するのですか？

問題文の問題は、引き算の演算子の周りにスペースがないことが原因でした。

文法では、二項演算子「+」と「-」の周りにスペースが必要であることに注意してください。 演算子の周りにスペースが必要であることに注意してください。と'/'演算子は空白を必要としません。

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

^{これは演算子と符号付き数値の区別を明確にするためだと推測されます。}

悪い。 calc(100%-88px)

良いですね。 calc(100% - 88px)

どうして認識されないとわかるのですか？取り消し線が表示されているためです。 と黄色い三角形のアイコンがスタイル ルールの横に表示されるからです。 ツールに表示されます。

というプロパティは <ストライク ストライク であるプロパティは有効であっても上書きされる可能性があります。 と で打たれ、その横に警告の三角形のアイコンがあるプロパティは無効です。

その他の注意事項

• Chrome は calc() に対して をサポートしています。 (OSX と Windows で確認)。
• クローム はビューポート単位をサポートしていない可能性があります 内の vh/vw のような calc() . 2014年末現在、これを実装する動きがあるようですが 関連するバグ はまだ未解決です。
• 私のテストでは、Safari は calc() と共に -webkit ベンダープレフィックスを使用します。
• IE9+ がサポートする calc() をベンダープレフィックス無しでサポートします。
• FF がサポートする calc() をベンダープレフィックス無しでサポートしています。