Bagaimanakah Saya Boleh Melaksanakan Flexbox dalam IE9 Tanpa Mengorbankan Keserasian Merentas Pelayar?

IE9 Flexbox Alternatives

Untuk tapak web yang dibangunkan pada mulanya dalam Chrome dan bertujuan untuk sokongan IE, menangani pelaksanaan Flexbox dalam IE9 menimbulkan cabaran. Walaupun IE11 dan Chrome menyokong Flexbox, IE9 tidak. Untuk mengelakkan helaian gaya khusus penyemak imbas, kaedah alternatif diperlukan.

Modernizr sebagai Alat Pengesan

Modernizr mengesan keupayaan penyemak imbas, termasuk sokongan Flexbox. Ia menambah kelas pada elemen HTML berdasarkan hasil pengesanan, seperti flexbox, no-flexbox dan flexbox-legacy. Ini membolehkan penerapan gaya sandaran:

<code class="css">.container {
  display: flex;
}
.no-flexbox .container {
  display: table-cell;
}</code>

Teknik Sandarkan

Pembentangan Zoe Gillenwater memberikan pandangan berharga tentang sandaran Flexbox untuk IE9:

• Jarak Navigasi Mendatar: Menggunakan paparan: blok sebaris;
• Elemen Menyemat: Menggunakan paparan: sel jadual;
• Penjajaran Borang: Mempertimbangkan penggunaan kaedah sandaran seperti reka letak berasaskan jadual;
• Aturan Fleksibel: Menggunakan sifat paparan dengan bijak, mempertimbangkan kedua-dua penyemak imbas yang didayakan Flexbox dan bukan Flexbox.

Petua penting lain termasuk:

• Sokongan Penyemak Imbas: IE10 menyediakan sokongan Flexbox yang lebih baik (seperti caniuse.com).
• Awalan: Autoprefiks boleh memudahkan keserasian merentas penyemak imbas.
• Merit Saling Balik: Sandaran Flexbox membenarkan keserasian ke belakang tanpa menjejaskan prinsip reka bentuk.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Flexbox dalam IE9 Tanpa Mengorbankan Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!