Bagaimana Saya Boleh Membuat Flexbox Berfungsi Secara Konsisten Merentasi Pelayar, Termasuk Internet Explorer 11?

Flexbox dan Internet Explorer 11: Display:flex in ?

Dalam usaha untuk meninggalkan reka letak "terapung" dan menerima CSS flexbox, seseorang mungkin menghadapi isu keserasian dalam Internet Explorer 11. Walaupun pelayar utama umumnya menyokong flexbox, IE11 membentangkan cabaran tertentu.

Teka-teki "Sticky Footer"

Contoh "Sticky Footer" daripada "Diselesaikan oleh Flexbox" menghadapi masalah dalam IE11. Dengan menambahkan display:flex pada elemen dan lebar:100% ke , bagaimanapun, isu itu telah diselesaikan. Memahami rasional di sebalik penyelesaian ini adalah penting.

Nilai lalai untuk flex dalam IE10 dan IE11 menyimpang daripada spesifikasi draf, menyebabkan tingkah laku tidak konsisten apabila ditemui dengan pengisytiharan CSS seperti flex:1. Mengubah suai ini kepada 1 0 0 memastikan keserasian merentas penyemak imbas.

Menangani Enigma "Objek Media"

Contoh "Objek Media" menghadapi halangan tambahan dalam IE11. Pelbagai percubaan untuk memanipulasi CSS tidak membuahkan hasil. Malangnya, penyelesaian yang bersih untuk mencapai kefungsian dalam IE11 masih sukar difahami.

Pertimbangan Keserasian

Penyelesaian yang dinyatakan di atas untuk contoh "Sticky Footer" mungkin secara tidak sengaja mengganggu pemaparan Firefox. Untuk menangani perkara ini, gunakan penggodaman yang menyasarkan Mozilla secara khusus, seperti yang dilihat di bawah:

@-moz-document url-prefix() {
  #flexible-content {
    flex: 1;
  }
}

Vendor penyemak imbas mungkin mentafsir flexbox secara berbeza disebabkan status Calonnya dalam W3C. Walau bagaimanapun, ini harus stabil apabila standard matang. Sebarang penyelesaian alternatif amat dihargai.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Flexbox Berfungsi Secara Konsisten Merentasi Pelayar, Termasuk Internet Explorer 11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!