IE がテーブル要素の「高さ: 100%」を無視するのはなぜですか?

IE がテーブル要素の高さ: 100% を無視する理由

問題

display: table、display: table-row で CSS テーブル レイアウトを使用する場合、および表示: table-cell では、100% に設定された子要素の高さは IE ブラウザーでは無視されます。

説明

残念ながら、CSS テーブル レイアウトの仕様では、その処理方法が不明瞭です。子要素の高さの割合。その結果、ブラウザーはこの動作を異なる方法で実装しました。 IE では、表のセルの高さのパーセンテージが認識されません。

影響

この不一致により、質問に見られるように、表のセル内のコンテンツが適切に適合しないという予期せぬ結果が発生する可能性があります。 IE で期待されています。

解決策

相互運用性の問題により純粋な CSS 回避策は実現できないため、代替アプローチを検討する必要があります。

• 使用JavaScript: JavaScript を使用して子要素の高さを動的に設定します。
• 固定高さを使用する: 適切に表示されるように、親テーブルと子要素に固定の高さを指定します。
• CSS テーブル レイアウトを避ける: フレックスボックスや CSS グリッドなどの代替レイアウト手法の使用を検討してください。

以上がIE がテーブル要素の「高さ: 100%」を無視するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。