CSS グリッド レイアウトが IE11 で機能しないのはなぜですか?それを修正するにはどうすればよいですか?

プレフィックスがあるにもかかわらず CSS グリッド レイアウトが IE11 で機能しない理由

CSS グリッド レイアウトは Web デザインに革命をもたらし、柔軟で強力なツールを Web デザインに提供します。複雑なレイアウトを作成します。ただし、IE11 は古いバージョンのグリッド仕様をサポートしているため、互換性の問題が発生することに注意することが重要です。

問題: 古いグリッド仕様

IE11 では、 2011 年の CSS グリッド仕様のバージョンであり、多くの最新機能よりも前のバージョンです。これには次のプロパティが含まれます。

• repeat() 関数
• span キーワード
• グリッドギャップ プロパティ

ソリューション: レガシー構文を実装します

との互換性を確保しますIE11 では、古いグリッド仕様でサポートされている構文を使用する必要があります。必要な変更は次のとおりです:

1. repeat() を明示的なグリッド テンプレートに置き換えます

repeat() 関数を使用する代わりに、グリッド テンプレートの列と行を明示的に定義します:

.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

2.スパンを、grid-column-span およびgrid-row-span に置き換えます

アイテムを複数の列または行にまたがるには、次のプロパティを使用します。

.grid-item.height-2x {
  grid-row-span: 2;
}
.grid-item.width-2x {
  grid-column-span: 2;
}

3.グリッド項目の自動配置を処理します

IE11 は、グリッド項目の自動配置をサポートしていません。グリッド行プロパティとグリッド列プロパティを使用して、各項目の位置を明示的に定義します:

.grid-item {
  grid-row: 1;
  grid-column: 1;
}

4.グリッド ギャップの削除

グリッド ギャップ プロパティは IE11 ではサポートされていません。グリッド項目を区切るには、マージンまたはパディングを使用します。

結論

これらの従来の構文の変更を実装することで、CSS グリッド レイアウトが IE11 で正しく機能することを確認できます。これらの古いプロパティのサポートは制限されていることに注意してください。可能な限り最新のグリッド仕様を使用することをお勧めします。

以上がCSS グリッド レイアウトが IE11 で機能しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。