ブラウザの互換性を保つために、CSS の calc() 関数に代わる最良の選択肢は何ですか?

CSS の Calc 関数の代替

calc() 関数は、CSS で値を動的に計算する便利な方法を提供します。ただし、IE 5.5 などの古いブラウザや特定のモバイル ブラウザではサポートされない場合があります。以下は、より広範囲のブラウザでより適切に機能する代替アプローチです:

Box-sizing: border-box

calc(100% - ) は、box-sizing: border-box; を設定することで置き換えることができます。一方の要素にはパディングまたはマージンを、もう一方にはパディングまたはマージンを設定します。たとえば、div 要素の幅を動的に設定するには:

元のアプローチ (calc() を使用):

width: calc(100% - 500px);

代替アプローチ (なし) calc()):

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}

.content {
  padding-left: 300px;
  width: 100%;
  box-sizing: border-box;
  background: wheat;
}

互換性:

この代替アプローチは、IE 5.5 以降、Opera、Android ブラウザなど、ほとんどの主要なブラウザをサポートします。 .

注: このソリューションは正確な情報に依存しています。要素の寸法の値。要素の寸法が流動的であるか、事前に決定できない場合は、calc() が唯一の実行可能なオプションとなる可能性があります。

以上がブラウザの互換性を保つために、CSS の calc() 関数に代わる最良の選択肢は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。