プレフィックスがあっても CSS グリッド レイアウトが IE11 でレンダリングされないのはなぜですか?

プレフィックスがあるにもかかわらず、IE11 で CSS グリッド レイアウトがレンダリングされない

問題を理解する

CSS グリッド レイアウトでの使用法-ms プレフィックスの数は、Microsoft Edge および IE11 との互換性を確保することを目的としています。ただし、IE11 でグリッドのレンダリングに失敗する場合は、根本的な理由を詳しく調べます。

IE11 の制限されたグリッド仕様の実装

問題の核心は IE11 にあります。古いバージョンのグリッド仕様に準拠しています。その結果、提供された HTML および SCSS コードで使用されるいくつかの CSS プロパティは、-ms プレフィックスが付いている場合でも、IE11 では認識されません。

特定の課題

1. repeat(): IE11 には、repeat() 関数のサポートがありません。グリッド テンプレートの列とグリッド テンプレートの行。これには、代わりに明示的な列定義と行定義を使用する必要があります。
2. span: Grid-column-span および Grid-row-span の spam キーワードは、古い仕様には存在しません。 IE11 では、同等のプロパティ Grid-column-span および Grid-row-span を使用する必要があります。
3. grid-gap: Grid-gap プロパティとその手書き形式は、IE11 ではサポートされていません。 。グリッド項目間の間隔には、余白などの代替方法が必要です。
4. グリッド項目の自動配置: IE11 は、グリッド項目の自動配置をサポートしていません。適切な配置を確保するには、各グリッド項目の -ms-grid-row プロパティと -ms-grid-column プロパティを明示的に定義します。

IE11 互換性のための改訂コード:

IE11 で動作するには、提供されたコードを次のように更新する必要があります:

    .grid {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
      -ms-grid-rows: 270px 270px 270px 270px;
      grid-gap: 30px;
    }

    .grid .grid-item {
      -ms-grid-column: span 2;
      -ms-grid-row: span 2;
    }

以上がプレフィックスがあっても CSS グリッド レイアウトが IE11 でレンダリングされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。