Mengapakah `ketinggian min` Bekas Flex Saya Diabaikan dalam IE10 dan IE11?

Ketinggian min Kontena Flex Diabaikan dalam IE

Apabila bekerja dengan flexbox dalam IE10 dan IE11, anda sepatutnya boleh menggunakan istilah flex piawai. Walau bagaimanapun, pengguna telah menghadapi isu di mana sifat ketinggian min bagi bekas flex tidak dihormati dalam penyemak imbas ini.

Struktur HTML yang ditentukan menampilkan div bekas dengan dua div anak, setiap satu dengan ketinggian berubah-ubah. Matlamatnya ialah untuk meletakkan anak pertama di bahagian atas dan anak kedua di bahagian bawah, dengan ruang antara mereka diagihkan sama rata menggunakan justify-content: space-antara.

Semasa persediaan ini berfungsi dalam Chrome dan Firefox, ia gagal dalam IE. Sifat ketinggian min diabaikan, menyebabkan bekas mengambil ketinggian elemen anak tertingginya.

Penyelesaian terletak pada menangani isu yang diketahui dengan pemaparan flexbox IE. Mengikut dokumentasi flexbugs GitHub (https://github.com/philipwalton/flexbugs#flexbug-3), versi penyemak imbas ini menghadapi masalah untuk menghormati sifat ketinggian min untuk bekas flex.

Untuk menyelesaikan isu ini, cuma jadikan bekas flex itu sendiri sebagai item flex. Ubah suai CSS seperti berikut:

body {
   display: flex;
   flex-direction: column;
}

Perubahan ini memaksa elemen badan, yang mengandungi div bekas, menjadi item fleksibel. Akibatnya, div kontena kini diiktiraf sebagai subitem fleksibel dalam konteks itu dan sifat ketinggian minnya dihormati.

JSFiddle yang disemak menunjukkan penyelesaiannya, dengan bekas kini mematuhi ketinggian min yang ditentukan dengan betul .

Atas ialah kandungan terperinci Mengapakah `ketinggian min` Bekas Flex Saya Diabaikan dalam IE10 dan IE11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!