Bagaimanakah Saya Boleh Membetulkan Masalah Keserasian Reka Letak Grid CSS dalam Internet Explorer 11?

Isu Keserasian Reka Letak Grid CSS dalam IE11

Walaupun menggunakan awalan, anda mungkin menghadapi masalah semasa melaksanakan Reka Letak Grid CSS dalam Internet Explorer 11. Ini adalah kerana IE11 menyokong versi Grid yang lebih awal spesifikasi.

Punca dan Penyelesaian

Untuk menyelesaikan isu keserasian ini, anda perlu membuat pelarasan pada kod CSS anda, kerana IE11 tidak menyokong sifat dan sintaks tertentu yang digunakan dalam spesifikasi yang lebih baharu.

1. Fungsi repeat()

IE11 tidak mempunyai sokongan untuk fungsi repeat(). Gantikannya dengan sintaks yang betul, seperti yang ditunjukkan di bawah:

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

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

2. Kata kunci span

Kata kunci span tidak dikenali dalam IE11. Gunakan sifat yang setara sebaliknya:

Instead of:
grid-row: span 2;

Use:
grid-row-span: 2;

3. Grid-gap Property

IE11 tidak menyokong grid-gap property. Pertimbangkan untuk menggunakan margin atau kaedah lain untuk memisahkan item grid.

4. Peletakan Auto Item Grid

Dalam IE11, item grid tidak diletakkan secara automatik. Anda perlu mentakrifkan kedudukan mereka secara eksplisit menggunakan sifat baris grid dan lajur grid.

Pertimbangan Tambahan

• Pastikan anda menggunakan awalan penyemak imbas dengan tepat (-ms untuk IE11).
• Uji kod anda dalam berbilang penyemak imbas untuk mengesahkan keserasian.
• Rujuk spesifikasi Reka Letak Grid CSS untuk mendapatkan maklumat terperinci tentang ciri yang disokong dalam IE11.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Masalah Keserasian Reka Letak Grid CSS dalam Internet Explorer 11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!