2017-02-16 5 views
0

私はcssの幅を計算しようとしていますが、間違った値を返すようです。幅の計算が不正確な値を返します

.item1 { 
    width: -o-calc((50%) - (2px)); 
    width: -moz-calc((50%) - (2px)); 
    width: -webkit-calc((50%) - (2px)); 
    width: calc((50%) - (2px)); 
    background-color: #e4e4e4; 
    float: left; 
    margin-right: 2px; 
} 

私は次のようにも試してみた:

width: calc(50% - 2px); 
width: calc(~"50% - 2px"); 

彼らはすべて誰かが私が間違ってやっている何を教えてもらえますwidth: 48%

を返します。これは私が得るものです

は、私はそれが生活し、ローカルホスト上で、双方が "問題" を持ってテストしていると私は、FirefoxChromeIE

を使用しています:

enter image description here

+0

値はどのような値になると思いますか? –

+0

あなたが「返す」48%と言ったらどういう意味ですか?どこに見えますか? – Johannes

+0

@fauxserious画面の50% - おそらく画面の2px。 50%は20ピクセル、たとえば2ピクセル= 18ピクセル –

答えて

1

calcの引数を変更するいくつかの種類のCSSプリプロセッサ(LESS、SASS多分?)を使用しているようです。それ以外の場合は、次の構文では正常に動作する必要があります:LESSは、独自の計算を行いますので、

width: calc(50% - 2px); 

は、しかし、LESS、例えばあなたは、引数をエスケープする必要があります。だから、LESS、それは次のようになります。

width: ~"calc(50% - 2px)"; 
0

私はあなたが(ブラウザツールのスクリーンショットを)掲載画像に示されているものだと思いますが、上記の投稿CSSルールはありませんが、別のルール:.Frontpage-LeftSide .nyhead.item1

カルクルールは、通常、ブラウザツールには、計算された値ではなく、CSSに記述されたとおりに表示されます。このルールはあなたのものを上書きしているようです(おそらくCSSの仕様のためです)。

PS:あなたはlessを使用している場合は、あなたがwidth: ~'calc(50% - 2px)';(修正:追加の引用符)を記述する必要があり、コードの下

0

をクロームで正常に動作している:

width:calc((50% - 2px)); 

私は、ピクセル値を増加させようとしました%でないピクセルに反映されます。

関連する問題