古いブラウザで CSS Calc() を使用せずに動的なサイズ変更を実現するにはどうすればよいですか?

CSS Calc の代替

CSS calc() 関数は、CSS ルール内で数学的計算を実行する便利な方法を提供します。ただし、レガシー ブラウザーと一部のモバイル ブラウザーのサポートは制限されています。この記事では、特に IE 5.5 以降、Opera、Android ブラウザを対象として、calc() を使用せずに動的サイジングを実現する別のアプローチを検討します。

IE-OLD では、expression() プロパティを使用して、 calc のような構文をサポートしていますが、これは非推奨であり、使用するとセキュリティ上の懸念が生じます。代わりに、border-box 値を持つ CSS box-sizing プロパティを採用することを検討してください。このアプローチでは、幅プロパティから減算するのではなく、パディングとマージンを使用して、希望のサイズを実現します。

たとえば、元の質問で提供された例を考えてみましょう。ここでは、固定幅のサイドバーが隣接するコンテンツの幅。 content 要素で width: calc(100% - 300px) を使用する代わりに、次のコードを使用して同じ効果を実現できます。

.sideBar {
  position: absolute; 
  top:0;
  left:0;
  width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

要素の幅である box-sizing: border-box を設定することで、要素のボックス モデルの外側の追加スペースとして扱うのではなく、パディングとボーダーを含めます。これにより、パディング左は、CSS で宣言されている実際の幅に影響を与えることなく、コンテンツ要素の使用可能な幅を効果的に減らすことができます。

このアプローチは、IE 5.5 以降だけでなく、Opera やAndroid ブラウザーは、幅広いブラウザーにわたって一貫したソリューションを提供します。

以上が古いブラウザで CSS Calc() を使用せずに動的なサイズ変更を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。