Bagaimana untuk Melaksanakan Flexbox dalam IE9 dan Di Bawah?

Alternatif Flexbox untuk IE9 dan Di Bawah

Apabila menyokong pelayar lama seperti IE9, pembangun sering menghadapi cabaran dengan melaksanakan ciri CSS moden seperti Flexbox. Artikel ini meneroka pelaksanaan alternatif untuk mengekalkan konsistensi merentas berbilang penyemak imbas.

Memahami Sokongan Flexbox

Flexbox, modul reka letak CSS, menawarkan fleksibiliti dalam menjajarkan dan mengedarkan elemen. Walau bagaimanapun, ia tidak disokong oleh IE9 dan ke bawah.

Pendekatan Saling Belakang dengan Modernizr

Satu pendekatan untuk menangani kekurangan sokongan Flexbox ini ialah menggunakan Modernizr, perpustakaan JavaScript yang mengesan keupayaan penyemak imbas. Modernizr menambah kelas pada elemen HTML yang menunjukkan sama ada Flexbox disokong atau tidak. Ini membolehkan pembangun menggunakan gaya sandaran berdasarkan kelas ini.

Contoh Pelaksanaan

Pertimbangkan pelaksanaan Flexbox berikut:

.container {
    display: flex;
}

Dalam penyemak imbas yang tidak mempunyai sokongan Flexbox (mis., IE9), gaya sandaran berikut boleh ditambah:

.no-flexbox .container {
    display: table-cell;
}

Petua Tambahan

• Blok sebaris boleh digunakan untuk mensimulasikan jarak mendatar Flexbox.
• Jadual -sel boleh digunakan untuk menyemat elemen tanpa Flexbox.
• Sokongan penyemak imbas untuk Flexbox secara amnya baik dari IE10 dan seterusnya.
• Menggunakan Autoprefixer dan Modernizr boleh menyelaraskan proses pengendalian awalan penyemak imbas dan menyediakan sandaran.

Kesimpulan

Dengan menggunakan Modernizr dan memanfaatkan teknik sandaran, pembangun boleh mencapai pengalaman reka letak yang konsisten merentas penyemak imbas, termasuk yang tidak menyokong Flexbox.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Flexbox dalam IE9 dan Di Bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!