IE6 および IE7 で DIV コンテナの固定高さを使用するためのヒント

IE6 と IE7 では CSS の解釈に多くの違いがあります。今日はそのうちの 1 つである高さについて説明します。
例：

コードをコピー

コードは次のとおりです。

IE6 の場合: DIV 内のコンテンツの高さが 50 ピクセルを超えない場合、DIV の高さは 50 ピクセルになります。設定値を超える場合、高さはコンテンツに合わせて拡張されます。これは通常、アダプティブハイトと呼ばれます。
IE7 の場合: DIV 内のコンテンツの高さが 50px を超えない場合、DIV の高さは 50px になります。設定値を超える場合、DIV の高さは 50px に固定され、超過したコンテンツは DIV を超えてオーバーフローします。DIV の下に他のコンテンツがある場合、オーバーフローしたコンテンツと重なります。

これは明らかに非常に重要なポイントであり、処理しないとページの乱れが発生します。この問題を解決するには通常 2 つの方法があります。

1. 高さに焦点を当てる: DIV の高さを 50 ピクセルに固定し、余分なコンテンツを非表示にして、両方のブラウザーの CSS を次のように記述します。

コードをコピー

コードは次のとおりです。

overflow:hidden は非常に重要であり、互換性はこれに依存します

2. コンテンツ指向: DIV の最小の高さを 50 ピクセルに設定します。コンテンツが多すぎる場合は、DIV の高さがコンテンツに合わせて調整されます。現時点では、互換性処理を行うために CSS HACK が必要です。
<div style="min-height:50px;_height:50px;">、min-height:50px は最小の高さで、IE7 と FF はこれを認識できますが、_height:50px は IE6 のみが認識できるようにするために下線が引かれています。

<<: CSS を使用して 3 列のアダプティブレイアウト (両側は固定幅、中央はアダプティブ) を実現します。

>>: tomcat8の最新のLinuxインストールプロセス