Bagaimana untuk Mencapai Reka Letak seperti Flexbox dalam IE9 dengan Modernizr dan CSS Fallbacks?

Alternatif Flexbox untuk IE9: Memanfaatkan Modenizr dan CSS Fallbacks

Sementara Flexbox telah merevolusikan reka letak CSS dalam penyemak imbas moden, menyokong pelayar lama seperti IE9 presents cabaran yang unik. Untuk mengelakkan helaian gaya khusus penyemak imbas, mari kita terokai alternatif yang berkesan.

Modernizr: Pengesanan Ciri Penyemak Imbas

Modernizr ialah perpustakaan JavaScript ringan yang mengesan keupayaan penyemak imbas. Ia menambahkan kelas pada elemen HTML untuk menunjukkan sokongan untuk pelbagai ciri, termasuk Flexbox.

Gaya Sandaran dengan CSS

Gunakan kelas Modernizr untuk menyediakan gaya sandaran untuk IE9:

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

Ini memastikan bekas akan dipaparkan secara fleksibel dalam penyemak imbas yang disokong, sambil berbalik kepada reka letak sel jadual dalam IE9 dan penyemak imbas lain yang tidak disokong.

Memanfaatkan Cerapan Pakar

Pembentangan Zoe Gillenwater di Flexbox menawarkan pandangan berharga untuk menyesuaikan diri dengan pelayar lama:

• Paparan: blok sebaris untuk jarak navigasi mendatar
• Paparan: jadual- sel untuk menyemat elemen tanpa Flexbox
• Menjajarkan borang menggunakan sandaran
• Contoh reka letak dengan dan tanpa susunan Flexbox

Kesimpulan

Dengan menggabungkan Modernizr untuk pengesanan ciri dan sandaran CSS, anda boleh melaksanakan fungsi seperti Flexbox sambil mengekalkan keserasian dengan pelayar lama. Gunakan petua pro yang disediakan oleh pakar dalam bidang untuk mengoptimumkan penyelesaian reka letak anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Reka Letak seperti Flexbox dalam IE9 dengan Modernizr dan CSS Fallbacks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!