Internet Explorer 11 での CSS グリッド レイアウトの互換性の問題を解決するにはどうすればよいですか?

IE11 での CSS グリッド レイアウトの互換性の問題

プレフィックスを利用しているにもかかわらず、Internet Explorer 11 で CSS グリッド レイアウトを実装するときに問題が発生する可能性があります。これは、IE11 が以前のバージョンのグリッドをサポートしているためです。

原因と解決策

これらの互換性の問題を解決するには、CSS コードを調整する必要があります。IE11 は、仕様で使用される特定のプロパティと構文をサポートしていないためです。新しい仕様

1. repeat() 関数

IE11 ではrepeat() 関数がサポートされていません。以下に示すように、正しい構文に置き換えます。

Instead of:
grid-template-columns: repeat( 4, 1fr );

Use:
grid-template-columns: 1fr 1fr 1fr 1fr;

2. span キーワード

span キーワードは IE11 では認識されません。代わりに、同等のプロパティを使用してください:

Instead of:
grid-row: span 2;

Use:
grid-row-span: 2;

3.グリッド ギャップ プロパティ

IE11 はグリッド ギャップ プロパティをサポートしていません。グリッド項目を区切るには、余白または他の方法を使用することを検討してください。

4.グリッド項目の自動配置

IE11ではグリッド項目は自動配置されません。グリッド行プロパティとグリッド列プロパティを使用してそれらの位置を明示的に定義する必要があります。

追加の考慮事項

• ブラウザのプレフィックスを正確に使用していることを確認してください (-ms の場合) IE11).
• 複数のブラウザでコードをテストして確認します互換性。
• IE11 でサポートされている機能の詳細については、CSS グリッド レイアウト仕様を参照してください。

以上がInternet Explorer 11 での CSS グリッド レイアウトの互換性の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。