Display: Table を使用するときに IE がテーブルのセルの高さを無視するのはなぜですか?

IE はテーブル セルの高さを無視します

display: table、display: table-row、display: table-cell プロパティを使用して、テーブルを作成すると、Internet Explorer (IE8 以降のバージョン) で予期しない問題が発生します。コンテンツを含む div に指定された高さ: 100% は無視されます。

未定義の仕様

この動作は、CSS 仕様のあいまいさに起因します。 CanIUse によると、IE はこれらのレイアウト プロパティを完全にサポートする必要があります。ただし、CSS 2.1 では、パーセンテージ値を使用して表示: テーブル行および表示: テーブルセル要素の高さをどのように決定するかについては不明のままです。

クロスブラウザー サポートの課題

この未定義の仕様により、ブラウザ間で実装に一貫性がなくなりました。ブラウザーが完全なサポートを主張している場合でも、高さ計算の正確な動作は異なる場合があります。この不一致により、ブラウザ間の互換性が困難になります。

代替ソリューション

未定義の仕様と IE 独自の解釈のため、純粋な CSS 回避策は実行できないため、代替ソリューションを使用する必要があります。探求されます。 JavaScript ベースのアプローチまたは高さの固定は潜在的なオプションですが、すべてのシナリオに最適であるとは限りません。

非推奨の認識

表示: table- に注意することが重要です。 cell とそれに関連するプロパティは、最新の CSS 仕様では非推奨と見なされており、より汎用性の高いフレックスボックスと CSS グリッド レイアウトに置き換えられています。これらの代替レイアウトは同様の機能を提供しますが、テーブル レイアウトの制限に対処し、高さとサイズをより細かく制御できるようになります。

以上がDisplay: Table を使用するときに IE がテーブルのセルの高さを無視するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。