IE がテーブル セルの子要素の `height: 100%` を尊重しないのはなぜですか?

IE はテーブル セルの子要素の高さ: 100% を無視します

IE8 以降で CSS テーブルを使用してテーブルを動的に構築するときに問題が発生します。仕様では関連する表示プロパティの完全なサポートが謳われているにもかかわらず、IE は予期せぬ動作をし、テーブル セル (「Elem」) 内の子要素 ​​(「Content」) に設定されている高さ: 100% を無視します。これにより、子要素の高さが切り取られ、表示が歪んでしまいます。

根本的な原因:

この不一致の原因は、CSS 仕様自体にあります。この仕様では、display: table-row および display: table-cell 要素の高さのパーセンテージ値の影響は未定義のままです。これは、CSS テーブルのブラウザ実装の高さのパーセンテージに関する動作が異なることを意味します。

回避策:

ブラウザ実装のばらつきを考慮して、クロスブラウザ CSS のみを見つける解決策は実現不可能かもしれません。ただし、考慮すべき代替アプローチがいくつかあります。

• JavaScript の回避策: JavaScript を使用して、親テーブルの高さに基づいて子要素の高さを動的に計算および設定します。
• テーブルレスソリューション: CSS テーブルの使用を避け、代わりにフレックスボックスやグリッドなどの他の方法を使用してレイアウトを実装します。 layout.
• 固定高さ: 子要素に特定の固定高さを設定し、テーブルのセル内に確実に収まるようにします。

ブラウザの非互換性:

この問題は、以下のすべてのバージョンの IE に影響することに注意してください。 11. したがって、IE 固有の CSS ハックに依存しても、すべての IE バージョンにわたって問題が解決されるわけではない可能性があります。

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