Mengapa Firefox dan Chrome Render Flexbox Secara Berbeza, dan Bagaimana Saya Boleh Membetulkannya?

Ketaksamaan Rendering Flexbox dalam Firefox dan Chrome

Dalam bidang pembangunan web, isu pemaparan merentas penyemak imbas boleh menimbulkan cabaran yang ketara. Satu isu yang dihadapi oleh pengguna Flexbox ialah tingkah laku tidak konsisten yang diperhatikan dalam Firefox dan versi Chrome yang lebih awal.

Dalam Chrome 47, div ".scroll" berfungsi seperti yang diharapkan, menggunakan Flexbox untuk mencapai ketinggian 100%. Walau bagaimanapun, dalam Firefox, div yang sama mematuhi ketinggian kandungan, mengakibatkan tingkah laku menatal yang tidak betul. Ini menimbulkan persoalan tentang penyelesaian silang penyemak imbas untuk percanggahan pemaparan ini.

Pengubahsuaian spesifikasi flexbox, yang menetapkan saiz minimum lalai item flex sama dengan kandungan, menyebabkan perbezaan pemaparan ini. Untuk membetulkan isu ini, pembangun boleh mengatasi lalai ini dengan menetapkan lebar min dan ketinggian min secara eksplisit kepada 0.

**.content {

background: yellow;
flex: 1;
display: flex;
flex-direction: column;

min-height: 0;           /* NEW */
min-width: 0;            /* NEW */

}
**

Walau bagaimanapun, kemas kini terbaru pada Chrome telah membawa perubahan dalam tingkah laku. Chrome 48 meniru pemaparan Firefox sebelum ini, menyebabkan penyelesaian yang sama boleh digunakan dalam kedua-dua penyemak imbas.

Nilai auto awal untuk lebar min dan ketinggian min, seperti yang ditakrifkan dalam CSS 2.1, telah digantikan dengan auto baharu nilai, yang menetapkan saiz minimum kepada saiz kandungan. Ini telah memperkenalkan perubahan dalam gelagat pemaparan lalai bagi elemen flexbox, yang membawa kepada ketidakkonsistenan yang diperhatikan antara penyemak imbas.

Atas ialah kandungan terperinci Mengapa Firefox dan Chrome Render Flexbox Secara Berbeza, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!