Internet Explorer で私の子「display: table-cell」が「height: 100%」を無視するのはなぜですか?

IE 表示: テーブルセル 子は高さを無視します: 100%

問題:

CSS を使用してテーブル レイアウトを動的に作成している間、display: table-cell を含む div は高さを無視します。 Internet Explorer 8 以降のバージョンでは 100% プロパティです。

回答:

免責事項: この問題は、明確な情報の欠如に固有のものです。表示: テーブル行および表示: テーブルセルの高さのパーセンテージの指定elements.

残念ながら、W3C 仕様ではこれらの要素で高さのパーセンテージをどのように解釈するかが定義されておらず、ブラウザの実装に委ねられています。その結果、Internet Explorer バージョン 8 ～ 11 を含む一部のブラウザでは、テーブル レイアウトの高さのパーセンテージが一貫して処理されない可能性があります。

考えられる回避策:

• パーセンテージの高さを避ける: テーブルには固定または絶対の高さを使用しますセル。
• 別のテーブル レイアウト方法を使用します: IE でこの問題を回避するには、CSS グリッド、フレックスボックス、または両方の組み合わせの使用を検討してください。
• 使用JavaScript: JavaScript を使用して表のセルの高さを設定します
• CSS プリプロセッサを利用する: Sass または Less などの CSS プリプロセッサを利用して、テーブルのセルの高さのピクセル値を計算して指定します。

注:

次のことを覚えておくことが重要です。 Internet Explorer 8 以降のバージョンをサポートする必要がある場合、ブラウザ間で動作が一貫していないため、純粋な CSS ソリューションは実現できない可能性があります。

以上がInternet Explorer で私の子「display: table-cell」が「height: 100%」を無視するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。