Mengapa `ketinggian min` Bekas Flex Saya Diabaikan dalam IE, dan Bagaimana Saya Boleh Membetulkannya?

Ketinggian Min Kontena Flex Diabaikan dalam IE

Pelayar IE mempunyai sejarah yang terkenal dengan pemaparan flexbox. Di antara isu ini, ketinggian min muncul sebagai kebimbangan khusus untuk bekas fleksibel. Walaupun jangkaan standard, IE10 dan IE11 tidak menghiraukan sifat ketinggian min.

Pertimbangkan senario di mana div kontena menempatkan dua div kanak-kanak. Kanak-kanak bersaiz kurang daripada 400px, memastikan ruang yang mencukupi untuk justify-content: space-between. Matlamatnya adalah untuk menyelaraskan anak pertama di bahagian atas dan yang kedua di bahagian bawah. Persediaan ini berfungsi dengan sempurna dalam Chrome dan Firefox, tetapi tidak dalam IE.

Punca masalah ini terletak pada pepijat flexbox tertentu (Flexbug 3). Untuk menyelesaikan masalah ini, penyelesaian mudah mengubah bekas fleksibel menjadi item fleksibel itu sendiri. Ini boleh dicapai dengan menambah peraturan CSS berikut:

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

Menggabungkan CSS ini akan menyelesaikan isu tanpa sebarang pengubahsuaian lanjut.

Untuk penerokaan lanjut, rujuk repositori Flexbug rasmi: https: //github.com/philipwalton/flexbugs#flexbug-3. Repositori ini memberikan cerapan tentang pelbagai pepijat flexbox dan menawarkan penyelesaian yang berkesan.

Atas ialah kandungan terperinci Mengapa `ketinggian min` Bekas Flex Saya Diabaikan dalam IE, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!