Saya yakin semua orang sudah familiar dengan penanganan BUG CSS yang umum, seperti: IE6 Three Pixel Gap, IE5/6 Doubled Float-Margin Bug, dll. Namun kita sering menemui masalah BUG CSS yang kompleks. Yang disebut "kompleks" pada dasarnya berarti bahwa kondisi pemicunya sangat rumit, dan "BUG" tidak berarti bahwa itu adalah BUG browser. Untuk masalah seperti ini, hal pertama yang perlu kita selesaikan adalah bagaimana menemukan masalahnya. Hanya dengan menemukan masalahnya dengan cepat kita dapat menyelesaikan masalah dengan lebih baik.
Untuk penentuan posisi cepat, pengalaman pribadi saya secara umum adalah sebagai berikut (padadasarnya
dapat menemukan lebih dari 90% masalah BUG CSS kompleks yang saya temui di Taobao):
1. Periksa apakah label halaman ditutup.
ini mungkin menimbulkan masalah bagi Anda. Masalah BUG CSS yang tidak terselesaikan setiap hari, tetapi hanya berasal dari ini. Lagi pula, templat halaman biasanya dibuat oleh pengembang, dan mereka dapat dengan mudah menimbulkan masalah seperti itu.
Tip cepat: Anda dapat menggunakan Dreamweaver untuk membuka file untuk diperiksa. Umumnya, jika tidak ada tag tertutup, tag tersebut akan disorot dengan latar belakang kuning.
2. Metode pengecualian gaya:
Beberapa halaman kompleks mungkin memuat N file CSS tautan eksternal, kemudian menghapus file CSS satu per satu, menemukan file CSS tertentu yang dipicu oleh BUG, dan mempersempit cakupan penguncian.
Untuk file gaya CSS bermasalah yang baru saja dikunci, hapus definisi gaya spesifik baris demi baris, temukan definisi gaya pemicu spesifik, dan bahkan atribut gaya pemicu spesifik.
3. Metode konfirmasi modul
Terkadang kita juga bisa memulai dari elemen HTML halaman. Hapus modul HTML yang berbeda di halaman dan temukan modul HTML yang memicu masalah.
4. Periksa apakah float sudah dibersihkan.
Faktanya, ada banyak masalah BUG CSS yang disebabkan oleh tidak dibersihkannya float. Penting untuk mengembangkan kebiasaan yang baik dalam membersihkan float. Disarankan untuk menggunakan metode membersihkan float tanpa tag HTML tambahan (cobalah untuk menghindari penggunaan metode serupa seperti overflow:hidden;zoom:1 untuk menghapus float, yang akan terlalu membatasi. ).
5. Periksa apakah haslayout dipicu di bawah IE.
Banyak BUG CSS kompleks di bawah IE terkait erat dengan haslayout unik IE. Menguasai dan memahami haslayout akan mendapatkan hasil dua kali lipat dengan separuh upaya dalam menangani bug CSS yang kompleks. Dianjurkan untuk membaca "Tentang memiliki tata letak" yang diterjemahkan oleh old9 (jika Anda tidak dapat melewati GFW yang hebat, Anda dapat membaca repost dengan warna biru)
Tip cepat: Jika haslayout dipicu, properti di alat debugging IE Bilah Alat Pengembang IE akan ditampilkan nilai haslayout adalah -1.
6. Metode debugging batas dan latar belakang,
seperti namanya, adalah mengatur batas atau latar belakang yang mencolok (biasanya hitam atau merah) untuk elemen yang akan di-debug. Metode ini adalah salah satu metode yang paling umum digunakan untuk men-debug BUG CSS, dan masih dapat diterapkan pada BUG yang kompleks. Terjangkau dan ramah lingkungan^^
Hal terakhir yang ingin saya tekankan kepada semua orang adalah bahwa mengembangkan kebiasaan menulis yang baik, mengurangi tag tambahan, mencoba menjadi semantik dan mematuhi standar sebenarnya dapat menyelamatkan kita dari BUG CSS yang sangat rumit , itu adalah Kami menciptakan masalah bagi diri kami sendiri. Saya harap semua orang akan menjauhi serangga dan menjalani kehidupan yang lebih baik dan lebih baik.