Mengapa Teks Tidak Dibungkus dalam Bekas IE11 Flex, dan Bagaimana Saya Boleh Membetulkannya?

Isu Balutan Bekas Fleksibel dalam IE11: Penyelesaian dan Penyelesaian

Apabila menggunakan bekas fleksibel untuk menjajarkan elemen teks, teks telah diperhatikan pembungkusan berkelakuan berbeza dalam Chrome dan IE11. Khususnya, dalam IE11, teks dalam bekas fleksibel gagal dibalut, mengakibatkan limpahan.

Pepijat dan Penyelesaian Diketahui

Ini sememangnya pepijat yang diketahui dalam IE11. Untuk menyelesaikan isu ini, adalah perlu untuk menentukan secara eksplisit lebar elemen anak dalam bekas flex. Menambah peraturan CSS berikut pada kod anda harus menyelesaikan isu pembungkusan:

.child {
  width: 100%;
}

Penyelesaian Ganti

Penyelesaian alternatif termasuk menggunakan flex-basis: 100% atau flex: 1 pada elemen kanak-kanak. Pilihan ini juga memaksa IE11 untuk memahami dan menghormati penghunian lebar penuh yang dimaksudkan bagi elemen kanak-kanak peringkat blok dalam bekas fleksibel.

Contoh

.child {
  flex-basis: 100%;
}

Penjelasan

IE11 memerlukan pengisytiharan lebar yang jelas untuk mengiktiraf bahawa kanak-kanak elemen harus memenuhi ruang yang tersedia penuh dalam bekas flex induk. Sebaliknya, Chrome mempamerkan gelagat pembalut yang dijangkakan walaupun tanpa pengisytiharan eksplisit ini.

Atas ialah kandungan terperinci Mengapa Teks Tidak Dibungkus dalam Bekas IE11 Flex, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!