Mengapa Tata Letak Grid CSS Saya Tidak Dipaparkan dalam IE11, Walaupun dengan Awalan?

Reka Letak Grid CSS Tidak Dipaparkan dalam IE11, Walaupun Awalan

Memahami Isu

Dalam Reka Letak Grid CSS, penggunaan awalan -ms bertujuan untuk memastikan keserasian dengan Microsoft Edge dan IE11. Walau bagaimanapun, apabila ini gagal untuk memaparkan grid dalam IE11, kami menyelidiki sebab asas.

Pelaksanaan Spesifikasi Grid Terhad IE11

Inti masalah terletak pada IE11 pematuhan kepada versi lama spesifikasi Grid. Akibatnya, beberapa sifat CSS yang digunakan dalam HTML dan kod SCSS yang disediakan tidak diiktiraf oleh IE11, walaupun dengan awalan -ms.

Cabaran Khusus

1. repeat(): IE11 kekurangan sokongan untuk fungsi repeat() dalam grid-template-lajur dan grid-template-baris. Ini memerlukan penggunaan takrifan lajur dan baris yang eksplisit.
2. span: Kata kunci span untuk grid-column-span dan grid-row-span tidak terdapat dalam spesifikasi yang lebih lama. IE11 memerlukan penggunaan sifat setara grid-column-span dan grid-row-span.
3. grid-jurang: Sifat grid-jurang dan bentuk long-handnya tidak disokong dalam IE11 . Kaedah alternatif, seperti jidar, diperlukan untuk jarak antara item grid.
4. Penempatan Auto Item Grid: IE11 tidak menyokong peletakan automatik item grid. Untuk memastikan penempatan yang betul, tentukan sifat -ms-grid-row dan -ms-grid-column secara eksplisit untuk setiap item grid.

Kod Disemak untuk Keserasian IE11:

Kod yang disediakan mesti dikemas kini seperti berikut untuk berfungsi dalam IE11:

    .grid {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
      -ms-grid-rows: 270px 270px 270px 270px;
      grid-gap: 30px;
    }

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

Atas ialah kandungan terperinci Mengapa Tata Letak Grid CSS Saya Tidak Dipaparkan dalam IE11, Walaupun dengan Awalan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!