動的寸法計算用の CSS Calc に代わるブラウザ互換の代替手段はありますか?

CSS Calc の代替

CSS Calc は動的寸法計算のための強力なツールですが、古いブラウザーに対するサポートは制限されています。幅広いブラウザ互換性を提供する Calc の代替手段の 1 つは、box-sizing プロパティです。

box-sizing の使用法

box-sizing プロパティは、要素の幅とサイズを決定する方法を決定します。高さが計算されます。デフォルトでは、ブラウザは「コンテンツ ボックス」モデルを使用します。このモデルでは、幅と高さにはコンテンツの寸法のみが含まれます。ただし、box-sizing を「border-box」に設定すると、幅と高さの計算にパディングとボーダーを含めるようブラウザに指示されます。

次のコードを考えてみましょう:

.element {
  width: calc(100% - 500px);
}

このコードは動的に要素の幅をビューポートの幅から 500 ピクセルを引いた値に設定します。ただし、IE 5.5 以前では、このコードは機能しません。

代わりに、box-sizing を使用すると同じ効果が得られます。

.element {
  width: 100%;
  padding: 0 250px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ここでは、幅を 100% に設定します。ただし、左右に 250 ピクセルのパディングを追加します。次に、box-sizing: border-box を使用して幅の計算にパディングを含めます。これにより、calc() の例と同じ有効幅が得られます。

追加のブラウザ サポート

ボックス サイズ設定プロパティは、Opera、Android ブラウザ、IE 6 以降をサポートしています。これにより、さまざまなブラウザにわたって動的寸法計算のための信頼性と一貫性のある方法が提供されます。

以上が動的寸法計算用の CSS Calc に代わるブラウザ互換の代替手段はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。