Mengapa Flexbox Saya Tidak Berfungsi dalam Internet Explorer 11, dan Bagaimana Saya Boleh Membetulkannya?

Flexbox Tidak Berfungsi dalam IE: Punca dan Penyelesaian

Seperti yang anda alami, flexbox boleh rosak dalam Internet Explorer 11. Ini disebabkan kepada isu penghuraian dengan sifat flex. Nasib baik, terdapat beberapa penyelesaian untuk menyelesaikan masalah ini:

1. Gunakan Sifat Tangan Panjang:

Daripada menggunakan trengkas (cth., "flex: 0 0 35%"), pecahkannya kepada sifat tangan panjang:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2. Dayakan pengecutan Flex:

Pastikan pengecutan fleksibel didayakan dengan menggantikan "flex: 0 0 35%" dengan:

flex: 0 1 35%;

3. Mengendalikan Peratusan dan Nilai Tanpa Unit:

Gunakan variasi dengan asas fleksibel, terutamanya jika anda tidak pasti tentang versi IE11 anda:

flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4. Pertimbangkan flex: auto:

Daripada "flex: 1," gunakan "flex: auto" (bersamaan dengan "flex: 1 1 auto"). Ini akan menghalang item runtuh apabila beralih dari arah lentur baris ke lajur.

5. Gunakan Sifat Lebar/Ketinggian:

Sebagai sandaran, pertimbangkan untuk kembali kepada sifat lebar/tinggi tradisional.

6. Pilih Reka Letak Blok:

Dalam keadaan tertentu, reka letak blok (iaitu, "paparan: blok") mungkin merupakan alternatif yang berdaya maju kepada reka letak fleksibel.

Petua Tambahan:

• Berhati-hati dengan pemencil yang mungkin menukar 0px kepada 0 (isu yang tidak menjejaskan 0%).

• Rujuk sumber berikut untuk mendapatkan cerapan lanjut:

  • Tingkah laku imej dalam flexbox: https://stackoverflow.com/q/ 23051125
  • Sifat pendek lwn. tangan panjang dalam IE: https://stackoverflow.com/q/24549977

Atas ialah kandungan terperinci Mengapa Flexbox Saya Tidak Berfungsi dalam Internet Explorer 11, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!