Perbincangan mengenai lanjutan pertukaran BUG_Experience sempadan terapung IE

Rakan-rakan yang biasa dengan model kotak CSS percaya bahawa BUG sempadan terapung berganda akan menjadi biasa (jika anda tidak begitu jelas, anda boleh mengkliknya BUG ini hanya akan dijana dalam elemen terapung pertama dalam terapung baris, jadi jika elemen Terapung pertama tidak akan mempunyai jarak dua kali tanpa menggunakan jidar luar. Walau bagaimanapun, saya baru-baru ini mendapati bahawa IE mempunyai lanjutan BUG ini.

Masalah
Dalam contoh berikut, margin tampalan luar elemen terapung pertama bagi baris terapung bagi semua rajah ialah 0

Jingar kiri #left2 ialah 50px dan dipaparkan seperti biasa

Apabila jidar-kiri #left2 ialah 100px, ia dipaparkan seperti biasa

Kemudian kami meningkatkan margin-kiri #left2 kepada 150px. Ia mula kelihatan sedikit pelik
Kami menukar lebar #left1 kepada 110px, manakala margin-kiri #left2 terus kekal 150px

Melihat fenomena di atas, kami mendapati bahawa IE benar-benar mempunyai personaliti. Sebenarnya, jika anda melihat dengan teliti, tidak sukar untuk mendapati bahawa apabila margin-kiri #left2 adalah kurang daripada atau sama dengan lebar #left, paparan adalah normal, tetapi apabila ia lebih besar daripada lebar, masalah akan berlaku. Jarak sempadan kiri sebenar #left2 adalah sama dengan #left1.width+(#left2.margin -left - #left1.width)*2

Penyelesaian

Untuk menyelesaikan BUG ini sebenarnya sangat mudah, sama seperti penyelesaian jarak dua kali, tetapkan #left2 {display:inline} OK. Ringkasan

Kuncinya ialah mengapa saya hanya mengatakan ia adalah lanjutan daripada BUG, ​​​​kerana sama ada ia adalah BUG berganda atau BUG daripada algoritma yang salah ini, ia hanya akan muncul sekali . Mungkin anda belum faham lagi, kemudian sebut ini:
1 Jika margin-kiri #left1 lebih besar daripada 0, maka sempadan kiri #left1 akan menyebabkan BUG jarak dua kali, dan margin-kiri #left2 tidak akan lebih besar daripada lebar #left1 Sesuatu akan berlaku;

2 Jika margin-kiri kiri1 sama dengan 0, dan jidar-kiri #kiri2 lebih besar daripada lebar #left1, maka akan terdapat pepijat dalam algoritma yang salah di sebelah kiri. jidar #kiri2, dan kemudian akan ada #kiri3, walaupun jidar kiri #kiri3 adalah sebesar lebar #kiri2 dan tiada kesilapan

3 Jika jidar-kiri kiri1 dan kiri2 kedua-duanya sama dengan 0, kemudian terdapat #kiri3, dan jidar-kiri #kiri3 adalah lebih besar daripada (jumlah lebar #kiri1. dan #left2), kemudian #left3 BUG algoritma yang salah muncul di sempadan kiri Sempadan kiri sebenar ialah (#left1.width+left2.width)+(#left3.margin-left-#left1.width-left2.width. )*2, dan kemudian yang selepas #left3 Semua elemen terapung tidak akan menjadi salah;

Di atas semuanya di sebelah kiri sebagai contoh, keadaan di sebelah kanan adalah sama