Mengapakah IE11 Melayan Item Flex yang Diposisikan Benar-benar sebagai Elemen Dalam Aliran?

Interaksi Item Flex Diposisikan Benar dengan Aliran Normal dalam IE11

Dalam situasi di mana bekas mengandungi berbilang div, salah satunya diposisikan secara mutlak sebagai latar belakang, IE11 mempamerkan tingkah laku yang tidak konvensional berbanding pelayar lain seperti Chrome atau Firefox. Walaupun div kedudukan mutlak dialih keluar dengan betul daripada aliran biasa, IE11 menganggapnya sebagai item fleksibel aliran masuk, yang membawa kepada pengagihan ruang yang tidak dijangka di antara div.

Akar Masalah

Isu utama isu ini terletak pada pelanggaran spesifikasi flexbox IE11. Mengikut spesifikasi, kanak-kanak fleksibel yang diposisikan secara mutlak harus dikecualikan daripada reka letak fleksibel dan tidak menyumbang kepada pengiraan jarak.

Penyelesaian

Beberapa penyelesaian boleh mengurangkan masalah ini dalam IE11 :

Mengubah Kedudukan Latar Belakang Div

Daripada meletakkan div latar belakang yang berkedudukan mutlak selepas div lain, alihkannya ke kedudukan di antara mereka, buat struktur seperti:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

Ringkasan

Ketidakpadanan dalam tingkah laku antara IE11 dan penyemak imbas yang patuh timbul daripada IE11 pematuhan kepada tafsiran lapuk spesifikasi flexbox. Dengan menggunakan salah satu penyelesaian, pembangun boleh memastikan gelagat yang konsisten merentas penyemak imbas apabila berurusan dengan item fleksibel yang diposisikan secara mutlak.

Atas ialah kandungan terperinci Mengapakah IE11 Melayan Item Flex yang Diposisikan Benar-benar sebagai Elemen Dalam Aliran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!