14

QtWebKit は一部の CSS3 機能をまだレンダリングしていないため、CSS を移行するための代替手段を探しています (既に FF と Chrome で作業しています)。

私は次のものを持っています:

.fit {
    width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: -o-calc(100% - 10px);
    width: calc(100% - 10px);
}

ワイヤーフレームの例に表示されているように、クラスがすべての要素に適合するようにします。

ここに画像の説明を入力

注:ほとんどすべての CSS3 機能は完全にレンダリングできますが、前述のように*-calc()問題があり、他の解決策が見つかりません。などを使用しmargin-rightpadding-right

@EDIT:フィドルhttp://jsfiddle.net/dj3hh/を作成して、予想される動作を示しました-フィドルのサイズを変更すると、すべてのマージン10pxが右から尊重されます。なしでこれを行う新しい方法が欲しいcalc()

4

2 に答える 2

16

ボックス モデルのレンダリングを に変更するとbox-sizing: borderbox、パディングは追加されるのではなく、合計幅に含まれます。この例では、ラッピング要素にクラスを追加していると想定しています。

.fit { 
    width:100%
    padding-right:10px
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 

}

ブラウザのサポートは非​​常に優れています。すべての最新ブラウザ。IE7以下のポリフィルが必要になるのはあなただけです。

背景情報の詳細については、paulirish.com/2012/box-sizing-border-box-ftw/ を参照してください。


編集:

これは、あなたの概要を完全に満たしていると私が信じている解決策です。フィドルを参照してください: http://jsfiddle.net/David_Knowles/UUPF2/

.fit { 
    width:100%
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 
}

td {
    padding-right: 10px;
}
于 2013-04-29T15:34:35.500 に答える