問題タブ [css-calc]

現在、LESS、CSS3、およびその他の「ファンシー」テクノロジーを使用しているプロジェクトに取り組んでいます。高さを計算するコードがいくつかあります。

また、いくつかの計算を行うために、いくつかの場所で -moz-calc を使用しています。問題は、クロスブラウザ (O、Safari、Chrome、IE8+) で動作させることです。JS(jquery)経由でやろうとしてもちょっとトリッキーなんですが、残念ながら本当にトリッキーな場合もあります。そこで、CSS の calc() のように、自動更新を備えたある種の防弾ソリューションを探しています。

私はここで可能かどうかさえ確信が持てない何かを達成しようとしています。

サイトのナビゲーションの下に特定のドロップシャドウPNG画像を配置しようとしています。ただし、この機能は、画像、div、ボタンなど、サイトで希望するオブジェクトにも再利用したいと考えています。基本的に、どのオブジェクトにも同じシャドウイメージを使用します。

css3calc()関数を使用して、オブジェクトの高さ@ 100％+ 25px（pngの高さ）を実行しようとしています。

私はスタイリングを試しました：

しかし、Firebugで収集できるものから100％+ 25pxは、何も達成されないため、新しい100％になります。

私も試しました：

しかし、ここでも喜びはありません。

calc（3em + 25px）;を使用する場合 問題なく動作しますが、これはどのオブジェクトでも動作するほど柔軟ではありません。

これも可能ですか？私も理にかなっていますか？！

私が使用しているLessコンパイラ（OrangeBitsおよびdotless 1.3.0.5 ）は積極的に翻訳しています

の中へ

これは明らかに望ましくありません。コンパイル中に属性を本質的に無視するようにLessコンパイラに通知する方法があるかどうか疑問に思っています。Lessのドキュメントと両方のコンパイラのドキュメントを検索しましたが、何も見つかりませんでした。

LessまたはLessコンパイラはこれをサポートしていますか？

そうでない場合は、CSSエクステンダーがありますか？

calc()またはのようなCSS関数の内部で使用することは可能ですtransformかtranslate？私はそれを機能させることができないようです。これがデモなので、みんなで遊ぶことができます：

http://jsfiddle.net/qdJwY/1/

私は計算定義を持っています:

640px にサイズ変更すると、新しい計算が適用されるはずですが、適用されません。

Google Developer Tools で調べたところ、新しい calc は適用されますが、奇妙な理由で古いものを上書きしていません。

開発者ツールには古いものに取り消し線が引かれていますが、まだ適用中です! . 交差したものを無効にすると機能します。

firefoxで試してみましたが、動作します。

-webkit-calcクロムは呼び出しをオーバーライドしないようですか?

COMPASS から生成されたコード:

編集:プレーンな幅は最初の calc をオーバーライドしますが、2 番目の cald は新しいプレーンな幅をオーバーライドしますが、適用されません!

次のように、少ない~演算子で変数を使用する方法はありますか

私が試したところ、次のような静的な値でのみ機能します

プロパティとして設定する前に文字列を評価することはできますか。

td固定幅と可変幅のテーブルを取得しようとしていますtd。

CSS関数を使用していますが、どういうわけかテーブルでcalc()は使用できないようです。%

それが私がこれまでに持っているものです：

私の見方では、うまくいくはずですが、そうではありません。

これを解決する方法を知っている人はいますか？または、目標を達成する方法について他の提案がありますか?

CSSを使用し、jqueryを使用せずにdivの幅を動的に変更しようとしています。次のコードは、次のブラウザで動作します: http://caniuse.com/calc

IE 5.5以降もサポートしたいのですが、次の式が見つかりました。これは正しい使用法ですか:

Opera と Android ブラウザもサポートできますか?

less を使用して css calc() ルーチンを使用する方法はありますか?

http://less2css.org/にアクセスし て、次の入力を入力すると (これは単なる通常の CSS ルールです):

ただし、出力はまったく同じはずです (通常の css であるため)。

less コンパイラが生成している css 出力はwidth: calc(-350%);

これを機能させる方法はありますか？