Mengapa Susun Atur Grid CSS Saya Tidak Berfungsi dalam IE11, Walaupun dengan Autoprefixer?

Reka Letak Grid CSS Tidak Berfungsi dalam IE11 Walaupun dengan Awalan

Walaupun menggunakan awalan automatik untuk menambah awalan pada sifat CSS yang berkaitan, reka letak Grid CSS nampaknya tidak berfungsi dalam IE11. Isu ini timbul disebabkan oleh spesifikasi Grid lapuk penyemak imbas.

Spesifikasi Grid Lapuk

IE11 melaksanakan versi lama spesifikasi Grid, yang tidak mempunyai beberapa sifat utama yang diperkenalkan kemudian. versi. Khususnya, sifat berikut tidak disokong oleh IE11:

• fungsi repeat() untuk mentakrifkan trek grid
• kata kunci span untuk item span
• sifat grid-gap untuk jarak

Penyelesaian

Untuk menangani isu ini, kod harus dikemas kini untuk menggunakan sintaks dan sifat yang betul untuk spesifikasi grid yang lebih lama. Perubahan berikut diperlukan:

1. Gantikan repeat() dengan Pengisytiharan Trek Eksplisit

Daripada menggunakan fungsi repeat(), isytiharkan trek baris dan lajur secara eksplisit menggunakan nilai dipisahkan koma:

.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. Gunakan Spanning Properties

Ganti span dengan bentuk tangan panjang grid-row-span dan 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. Alih keluar Grid-Gap dalam IE11

IE11 tidak menyokong sifat grid-jurang. Pertimbangkan untuk menggunakan jidar atau pelapik untuk jarak:

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

Nota Tambahan

IE11 juga tidak mempunyai sokongan untuk penempatan automatik item grid. Untuk memastikan penempatan yang betul, nyatakan kedudukan baris dan lajur grid untuk setiap item menggunakan sifat -ms-grid-row dan -ms-grid-column.

Atas ialah kandungan terperinci Mengapa Susun Atur Grid CSS Saya Tidak Berfungsi dalam IE11, Walaupun dengan Autoprefixer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!