web-dev-qa-db-ja.com

CSS3 calc（100％-88px）が機能しないChrome

widthの単位としてCSS3 calc()関数を使用すると、Chromeの最新バージョンでは機能しません。

Chrome開発者ツールでは、calc()のルールには 取り消し線 それと、左側の黄色い三角形の感嘆符を通して。これは、プロパティまたは値が認識されないことを示しています。

最新のブラウザで動作させるにはどうすればよいですか？プロパティではなく値であるため、ベンダープレフィックスはどこにありますか？

更新：

うまくいかないと言うと、Chrome Dev Toolsは、私の使用法を認識していないと言っているwidth: calc(100%-88px);。 chrome dev tools。のスタイルルールの横にある取り消し線と黄色の三角形のアイコンが原因です。

cssgoogle-chromecss3
60
Irfan Mir

問題の問題は、減算演算子の周りのスペースの不足が原因でした。

文法では、バイナリの「+」および「-」演算子の周りにスペースが必要であることに注意してください。 「*」および「/」演算子はスペースを必要としません。

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

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

悪い：calc(100%-88px)
Good：calc(100% - 88px)

認識されていないことをどのようにして確認できますか？ chrome dev tools。のスタイルルールの横にある取り消し線と黄色の三角形アイコンのため。

あるプロパティ 打たれた Chromeのデベロッパーツールで表示すると、有効ではあるが上書きされる可能性があります。ただし、横に警告三角形のアイコンが付いたandのプロパティは無効です。

その他の注意事項

  • Chromeはcalc()を かなりの時間 （OSXおよびWindowsで確認済み）でサポートしています。
  • Chrome ビューポートユニットをサポートしない場合がありますcalc()内のvh/vwなど。 2014年後半には、これを実装する活動がありますが、 関連するバグ はまだ開いています。
  • 私のテストでは、SafariはOSXで_-webkit_ベンダープレフィックスを持つcalc()をサポートしますが、Windowsはサポートしません。
  • IE9 +は、ベンダープレフィックスなしでcalc()をサポートします。
  • FFは、ベンダープレフィックスなしのcalc()をサポートします。
155
Tim Medora

つかいます -webkitプレフィックスと演算子の前後のスペース

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);
11
Tamil Selvan C

私はcalcプロパティに少し苦労しましたが、以下のアプローチのみが機能しました。

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

上記のような提案：

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

60％のような間違った計算になりました。

それが誰かを助けることを願っています。

5
Tomasz Czechowski