Autoprefixer を使用しても CSS グリッド レイアウトが IE11 で機能しないのはなぜですか?

プレフィックスがあっても CSS グリッド レイアウトが IE11 で機能しない

自動プレフィックスを使用して関連する CSS プロパティにプレフィックスを追加しているにもかかわらず、CSS グリッド レイアウトIE11では動作が悪いようです。この問題は、ブラウザの古いグリッド仕様が原因で発生します。

古いバージョンのグリッド仕様

IE11 は古いバージョンのグリッド仕様を実装しており、後から導入されるいくつかの重要なプロパティが欠落しています。バージョン。具体的には、次のプロパティは IE11 ではサポートされていません:

• グリッド トラックを定義するためのrepeat() 関数
• アイテム スパンのキーワード
• グリッド ギャップ プロパティspacing

解決策

この問題に対処するには、古いグリッド仕様の正しい構文とプロパティを使用するようにコードを更新する必要があります。次の変更が必要です:

1. repeat() を明示的なトラック宣言に置き換えます

repeat() 関数を使用する代わりに、カンマ区切りの値を使用して行と列のトラックを明示的に宣言します:

.grid {
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 270px 270px 270px 270px;
  grid-template-rows: repeat(4, 270px);
}

2.スパニング プロパティを使用します

スパンをその手書き形式の Grid-Row-Span および Grid-column-Span に置き換えます:

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

3. IE11 でグリッド ギャップを削除する

IE11 はグリッド ギャップ プロパティをサポートしていません。代わりに、間隔を空けるためにマージンまたはパディングを使用することを検討してください。

.grid .grid-item {
  margin: 30px;
}

追加メモ

IE11 では、グリッド項目の自動配置もサポートされていません。適切な配置を確保するには、-ms-grid-row プロパティと -ms-grid-column プロパティを使用して、各項目のグリッドの行と列の位置を明示的に指定します。

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