Bagaimanakah Saya Boleh Berjaya Melaksanakan \'Sticky Footer\' Flexbox dalam Internet Explorer 11?

Flexbox dalam Internet Explorer 11: Meneroka Potensi Sekatan Jalan

Menavigasi alam CSS flexbox boleh menjadi tugas yang sukar, terutamanya apabila mempertimbangkan pelbagai tahap keserasian penyemak imbas. Walaupun kebanyakan pelayar moden menyokong flexbox dengan lancar, Internet Explorer 11 memberikan cabaran yang ketara. Satu isu timbul apabila cuba melaksanakan contoh "Sticky Footer" daripada "Diselesaikan oleh Flexbox" tanpa mendorong tingkah laku yang tidak dijangka.

Untuk menyelidiki penyelesaian, adalah penting untuk memahami kesan paparan:flex pada < html> dan lebar:100% pada elemen. Menurut CanIUse, IE10 dan IE11 mentafsir flex:1 secara berbeza daripada pelayar lain disebabkan perbezaan sejarah daripada spesifikasi draf. Secara lalai, mereka menetapkan 0 0 auto dan bukannya 0 1 auto untuk melenturkan item.

Untuk menangani isu ini, laraskan parameter fleksibel kepada 1 0 0 dalam CSS anda. Pengubahsuaian ini sepatutnya mengurangkan masalah, sekurang-kurangnya sebahagiannya. Walau bagaimanapun, perubahan ini mungkin secara tidak sengaja mengganggu fungsi dalam Firefox. Untuk mengurangkan perkara ini, gunakan penggodam penyasaran khusus untuk Mozilla untuk mengembalikan flex kembali kepada nilai yang dimaksudkan.

Contohnya:

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

Ingat, flexbox kekal sebagai Syor Calon W3C, yang menyumbang kepada jurang perbezaan dalam tafsiran pelayar. Apabila spesifikasi dimuktamadkan, ketidakkonsistenan ini dijangka akan berkurangan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Berjaya Melaksanakan \'Sticky Footer\' Flexbox dalam Internet Explorer 11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!