Bagaimana untuk Melaksanakan Flexbox untuk IE9 dan Beyond?

Alternatif Flexbox untuk IE9

Pelayar moden menawarkan model CSS flexbox, menyediakan cara yang cekap untuk mengedar dan menjajarkan elemen. Walau bagaimanapun, IE9 tidak mempunyai sokongan Flexbox.

Pertimbangkan pelaksanaan berikut untuk IE10 :

<code class="css">div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}</code>

Untuk menangani ketiadaan Flexbox dalam IE9, pertimbangkan untuk memasukkan Modernizr, perpustakaan JavaScript yang mengesan keupayaan Flexbox. Dengan Modernizr, anda boleh menambah gaya sandaran jika perlu. Contohnya:

<code class="css">.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}</code>

Rujuk pembentangan Zoe Gillenwater untuk panduan selanjutnya:

• Menaik Taraf Dengan Flexbox:

  • Jarak navigasi mendatar : paparan: inline-block;
  • Menyemat elemen tanpa Flexbox: paparan: table-cell;
  • Menjajarkan bentuk sandaran
  • Contoh dengan dan tanpa tertib lentur

• Reka Letak CSS3:

  • Menggunakan blok sebaris dengan Flexbox: bentuk mendatar
  • Menggunakan blok sebaris dengan Flexbox: navigasi mendatar

Ingat:

• Sokongan penyemak imbas untuk IE10 boleh dipercayai.
• Autoprefixer mengendalikan awalan penyemak imbas.
• Modernizr menyediakan sandaran.
• Penggunaan Flexbox tidak eksklusif.

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