Bagaimana Saya Boleh Membetulkan Masalah Flexbox dalam Internet Explorer 11?

Menyelesaikan Isu Flexbox dalam IE

Tidak dapat memanfaatkan flexbox dalam IE11? Isu ini timbul kerana kesukaran IE menghuraikan sifat flex. Berikut ialah beberapa penyelesaian:

Menggunakan Sifat Tangan Panjang

Elakkan menggunakan sifat lentur trengkas (cth., lentur: 0 0 35%). Sebaliknya, gunakan sifat long-hand:

• flex-grow: 0
• flex-shrink: 0
• flex-asas: 35%

Mendayakan Pengecutan fleksibel

Pastikan pengecutan fleksibel didayakan dalam pengisytiharan fleksibel anda. Cuba ubah suai kod anda daripada flex: 0 0 35% kepada flex: 0 1 35%.

Mengatasi Variasi Nilai Asas Flex

IE11 mempamerkan tingkah laku yang berbeza dengan flex- nilai asas. Eksperimen dengan variasi ini:

• flex: 1 1 0
• flex: 1 1 0px
• flex: 1 1 0%

Berhati-hati terhadap pemencil yang menukar 0px kepada 0, yang boleh menyebabkan penyahpepijatan masalah.

Menggunakan Flex: Auto

Ganti flex: 1 dengan flex: auto, yang membayangkan:

• flex-grow: 1
• kecutan lentur: 1
• asas lentur: auto

Ini menghalang item runtuh apabila beralih daripada arah lentur baris ke lajur dalam pertanyaan media.

Menggunakan Sifat Lebar/Ketinggian Lama

Pertimbangkan untuk kembali kepada sifat lebar dan ketinggian tradisional daripada menggunakan flex.

Mengguna pakai Reka Letak Blok

Dalam sesetengah kes, reka letak blok (paparan: blok) boleh menggantikan reka letak flex (paparan: flex; flex-direction: lajur) secukupnya. dalam bekas tertentu.

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