Masalah kompatibilitas IE6 harus dipertimbangkan dalam tata letak halaman web

Gambar berikut menunjukkan tingkat tampilan browser dalam detail pengunjung dalam sistem statistik situs web, dan IE6 menyumbang lebih dari 40%. Meskipun ada banyak jenis browser, IE saja memiliki banyak versi seperti IE5.5, IE6, IE7, IE8, dll. Di antara banyak versi kelas atas ini, IE6 masih dicintai oleh sebagian besar pengguna, jadi ketika mengetik, IE6 tidak dianggap sebagai masalah kompatibilitas IE6, jika tidak, ia akan kehilangan banyak pengunjung.

Berikut adalah 10 masalah yang harus diperhatikan di IE6:

Anda perlu menambahkan tipe Doctype di bagian atas halaman HTML. Tentu saja, versi ketat itu layak direkomendasikan, misalnya:

<! Doctype html public -// w3c // dtd html 4.01 // en

http://www.w3.org/tr/html4/strict.dtd>

Atau, halaman xhtml! Doctype:

<! Doctype html public -// w3c // dtd xhtml 1.0 strict // en

http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>

Hal terakhir yang ingin Anda lihat adalah IE6 memasuki mode Quirk - sebenarnya ada cukup banyak keanehan.

Posisi Pengaturan: Relatif memecahkan lebih dari satu masalah, terutama saat menetapkan keselarasan. Jelas, satu hal yang perlu Anda pahami adalah bahwa posisi absolut relatif berbicara. Mungkin, karena Anda tidak memiliki pengaturan, dan Anda tidak tahu bahwa semuanya telah terbang di sana. Misalnya, jika Anda mendesain setiap artikel, ada gambar sebelumnya, dan akhirnya, Anda menemukan bahwa hanya ada satu gambar di halaman, mungkin mereka tumpang tindih.

Ini berasal dari bug margin ganda IE6 yang terkenal. Misalnya, jika Anda mendesain mengambang untuk div dan mengatur margin-kiri: 5px;, kemungkinan besar margin-kiri: 10px di IE6. Di sini, atur tampilan: inline untuk elemen mengambang untuk menyelesaikan masalah.

Banyak masalah IE6 (atau IE7) dapat diselesaikan dengan menetapkan nilai haslayout. (Jika Anda tidak tahu apa itu haslayout, silakan lihat di sini)

Cara termudah untuk menetapkan nilai haslayout untuk suatu elemen adalah dengan menambahkan tinggi atau lebar CSS (tentu saja, zoom juga dapat digunakan, tetapi ini bukan bagian dari CSS). Menetapkan nilai spesifik direkomendasikan, tetapi kadang -kadang tidak selalu berarti bahwa tinggi. Di sini, Anda dapat menggunakan tinggi: 1%. Jika elemen induk tidak mengatur tinggi, ketinggian fisik elemen tidak akan berubah, tetapi sudah memiliki properti haslayout.

Tata letak yang kompleks dapat menyebabkan beberapa teks di dalam elemen mengambang muncul di bawah posisi mengambang pembersihan. Ini adalah masalah yang aneh, dan berikut ini dapat membantu Anda menyelesaikannya:

• Pastikan tampilan itu: inline diatur ke elemen mengambang;

• Gunakan margin-kanan: -3px dalam elemen mengambang;

• Tambahkan komentar IE setelah elemen terakhir dari elemen mengambang, misalnya: <!-[if! IE]> Biarkan komentar Anda di sini ... <! [Endif]->

• Tambahkan div ke elemen terakhir (ini untuk mengatur lebar ke 90% atau tinggi serupa lainnya)

UPDATE: Cara termudah adalah menghapus semua komentar. (Terima kasih kepada Tian Wei'er untuk tipnya, saya belum menemukannya sendiri, tetapi setelah mencari di Google, saya menemukan bahwa metode ini juga dapat diselesaikan, dan ini adalah metode yang disarankan.)

Anda dapat memeriksa lebih banyak penjelasan tentang ini di positioniseverything.net.

6. Hanya gunakan hover di tag <a>, IE6 hanya mendukung tag <a> untuk menampilkan gaya hover

Tentu saja, Anda masih dapat menyelesaikan metode ini melalui JS. Namun, ini tentang aksesibilitas. Disarankan untuk tidak menetapkan konten penting di Hover yang diimplementasikan menggunakan JS.

Misalnya, Min-Height dapat menghindari penggunaan CSS untuk mencapai kompatibilitas dengan IE.

#element {

Min-tinggi: 20em;

Tinggi: Otomatis! Penting;

Tinggi: 20em; /* Biarkan IE6 menampilkan tinggi ini*/

}

IE6 tidak dapat mengidentifikasi dengan benar-benar min. Anda dapat mengatur ketinggian tetap untuk memungkinkan IE6 untuk menyelesaikan ke 20em. Meski begitu, itu akan mengubah tingginya karena ukuran konten. Cara lain adalah dengan menggunakan selektor lanjutan:

#element {

Min-tinggi: 20em;

Tinggi: 20em;

}

/ * Abaikan IE6 */

#Element [id] {

Tinggi: otomatis;

}

Skala akan membingungkan IE6 kecuali Anda menambahkan ketinggian yang tepat ke elemen induk. Jika tidak, tambahkan! Penting bagi yang lain, misalnya:

tubuh{

Margin: 2% 0! Penting;

Margin: 20px 0; /* IE6 dapat dibaca*/

}

Jangan lupa untuk menguji lebih awal dan sering menguji kecuali level Anda selesai. Jika tidak, Anda dapat menghabiskan lebih banyak waktu untuk menyelesaikan masalah IE6. Secara umum, jika situs web Anda dapat berkinerja baik di bawah IE6 dan Firefox, diperkirakan bahwa browser lain tidak akan memiliki masalah besar.

Dalam banyak kasus, menyelesaikan masalah mungkin membutuhkan lebih banyak waktu daripada refactoring kode Anda.