23

私はCSS関数calc（）とその素晴らしいことについて学びました。私はそれを次のように使用しようとしました：

#abc{width:calc(100%-20px)}

ただし、この関数の問題は、機能しないことです。このコードIE9とSafariをテストしましたが、機能しませんでした。

なぜそれが機能しないのですか？

4

8 に答える 8

52

演算子-はスペースで囲む必要があります:

#abc{width:calc(100% - 20px)}

MDN 情報のcalc()引用:

注: +and-演算子は空白で囲む必要があります。たとえば、calc(50% -8px)はパーセンテージの後に負の長さが続く (無効な式) として解析されますcalc(50% - 8px)が、 はパーセンテージの後に減算演算子と長さが続くものとして解析されます。同様に、calc(8px + -50%)は長さの後に加算演算子と負のパーセンテージが続くものとして扱われます。

*and/演算子に空白は必要ありませんが、一貫性を保つために空白を追加することは許可されており、推奨されています。

これに関する正式な声明は、CSS Values and Units Module Level 3 仕様の8.1.1 節にあります。

于 2013-02-27T11:41:07.140 に答える
18

calc()採用しやすくするAndroid のネイティブ ブラウザー サポートを除く、すべての最新ブラウザー。ただし、レイアウトに大きな影響を与え、サポートされていないブラウザーではデザインが壊れる可能性があることに注意してください。

フォールバック宣言で使用する必要があるため、サポートしていないブラウザーが壊れることはありません。

width: 500px; /** older browsers **/ 

width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/

width: -moz-calc(50% - 20px); /** FF 4-15  **/

width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
于 2014-04-22T12:25:05.060 に答える
5

IE9、IE10、Safari 6.0でサポートされています（プレフィックスを使用-webkit-）。ここでサポートテーブル全体を確認できます：http：//caniuse.com/#feat=calc

于 2013-02-27T09:21:32.233 に答える
4

calc()メソッドの IE9 の実装は、display: table.

これを回避するには、その周りに div をラップし (これは ですdisplay: block)、display: table要素の幅を 内にしwidth: 100%ます。calcd 幅を周囲に適用しますdiv。

于 2015-09-22T18:56:58.307 に答える
0

Modernizrの最新バージョンでは、csscalc のサポートを確認できます。Modernizr.csscalcを使用するだけです。この関数は、サポートされている場合は true を返し、サポートされていない場合は false を返します。あなたの場合、あなたの css にこれがあります：

#abc {  width:calc(100% - 20px); }

そしてあなたのjavascriptで（私はここでjQueryを使用しています）

if(!Modernizr.csscalc){
    $('#abc').width($(PARENT_EL).width() - 20)
}

ところで。ID ではなくクラス名で要素のスタイルを設定することをお勧めします。要素の ID は、javascriptを介してそれをターゲットにするためにのみ使用する必要があります。

于 2013-10-22T09:53:49.300 に答える