Mengapa Elemen Flexbox Saya Tidak Konsisten dalam Firefox dan Chrome 48?

Isu Rendering Penyemak Imbas dengan Flexbox dalam Firefox dan Chrome 48

Latar Belakang

A kemas kini terkini kepada spesifikasi flexbox telah memperkenalkan perubahan dalam saiz minimum lalai untuk item flex agar sepadan dengan kandungan saiz. Semasa Chrome 47 melaksanakan perubahan ini dengan betul, Chrome 48 dan Firefox telah mempamerkan isu dengan pemaparan elemen flexbox.

Masalah

Dalam Firefox, elemen flexbox tertentu dengan kandungan melimpah berkelakuan di luar jangkaan. Walaupun Chrome 47 memberikan elemen ini dengan betul, Chrome 48 kini sepadan dengan gelagat Firefox.

Penyelesaian

Untuk menangani isu ini, anda boleh mengatasi saiz minimum lalai elemen ini secara eksplisit menggunakan sifat CSS berikut:

.content {
    min-width: 0;
    min-height: 0;
}

Ini memastikan elemen flexbox boleh dengan betul mengecil agar sesuai dengan kandungan mereka, menyelesaikan masalah pemaparan.

Butiran daripada Spesifikasi

Spesifikasi flexbox menyatakan:

"Untuk menyediakan lalai yang lebih munasabah saiz minimum untuk item fleksibel, spesifikasi ini memperkenalkan nilai auto baharu sebagai nilai awal sifat lebar min dan ketinggian min yang ditakrifkan dalam CSS 2.1."

Impak pada Chrome 48

Menurut pemerhatian, pelaksanaan awal kemas kini flexbox dalam Chrome 48 meniru gelagat Firefox, menyebabkan isu pemaparan yang serupa. Walau bagaimanapun, laporan berikutnya menunjukkan bahawa Chrome 48 telah mengemas kini gelagat pemaparannya agar sepadan dengan penyelesaian yang disediakan di atas.

Kesimpulan

Dengan menetapkan saiz minimum item flex secara eksplisit kepada 0 dalam kedua-dua arah, anda boleh menyelesaikan isu pemaparan yang dialami dalam Firefox dan Chrome 48 dengan berkesan apabila mengendalikan kandungan yang melimpah.

Atas ialah kandungan terperinci Mengapa Elemen Flexbox Saya Tidak Konsisten dalam Firefox dan Chrome 48?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!