Topik yang kita bahas adalah tata letak halaman web CSS. Masalah yang paling menyusahkan bagi semua orang adalah kompatibilitas browser. Meskipun 52CSS.com telah memperkenalkan banyak pengetahuan ke arah ini, namun masih membuat banyak pengembang bingung -tiga perbedaan antara JavaScript dan JavaScript di IE dan Firefox. Saya harap ini dapat membantu pembelajaran semua orang.
1. masalah document.formName.item("itemName"). Deskripsi masalah: Di IE, Anda dapat menggunakan document.formName.item("itemName") atau document.formName.elements ["elementName"]; di bawah Firefox, Anda hanya dapat menggunakan document.formName.elements["elementName"] .
Solusi: Gunakan document.formName.elements["elementName"] secara seragam.
2. Masalah dengan objek koleksi Deskripsi masalah: Di bawah IE, Anda dapat menggunakan () atau [] untuk mendapatkan objek koleksi di Firefox, Anda hanya dapat menggunakan [ ] untuk mendapatkan objek koleksi;
Solusi: Gunakan [] secara seragam untuk mendapatkan objek kelas koleksi.
3. Masalah atribut khusus Deskripsi masalah: Di IE, Anda dapat menggunakan metode memperoleh atribut reguler untuk mendapatkan atribut khusus, atau Anda dapat menggunakan getAttribute() untuk mendapatkan atribut khusus di Firefox, Anda hanya dapat menggunakan getAttribute( ) untuk mendapatkannya.
Solusi: Dapatkan atribut khusus secara seragam melalui getAttribute().
4. masalah eval("idName") Deskripsi masalah: Di bawah IE, Anda dapat menggunakan eval("idName") atau getElementById("idName") untuk mendapatkan objek HTML dengan id idName di bawah Firefox, Anda bisa hanya gunakan getElementById ("idName") untuk mendapatkan objek HTML dengan id idName.
Solusi: Gunakan getElementById("idName") secara seragam untuk mendapatkan objek HTML yang idnya adalah idName.
5. Masalah nama variabel sama dengan ID objek HTML Deskripsi masalah: Di bawah IE, ID objek HTML dapat digunakan langsung sebagai nama variabel objek bawahan dokumen, tetapi tidak pada Firefox; pada Firefox, dapat digunakan dengan objek HTML. Nama variabel dengan ID yang sama tidak dapat digunakan pada IE.
Solusi: Gunakan document.getElementById("idName") alih-alih document.idName. Sebaiknya jangan menggunakan nama variabel dengan ID objek HTML yang sama untuk mengurangi kesalahan saat mendeklarasikan variabel, selalu tambahkan kata kunci var untuk menghindari ambiguitas.
6. Masalah Const Deskripsi masalah: Di bawah Firefox, Anda dapat menggunakan kata kunci const atau kata kunci var untuk mendefinisikan konstanta di bawah IE, Anda hanya dapat menggunakan kata kunci var untuk mendefinisikan konstanta;
Solusi: Gunakan kata kunci var secara seragam untuk mendefinisikan konstanta.
7. Masalah dengan atribut input.type Deskripsi masalah: Atribut input.type di IE bersifat read-only, namun atribut input.type di Firefox bersifat read-write.
Solusi: Jangan ubah atribut input.type. Jika Anda harus memodifikasinya, Anda dapat menyembunyikan masukan asli terlebih dahulu, lalu menyisipkan elemen masukan baru di posisi yang sama.
8. Masalah Window.event Deskripsi masalah: window.event hanya dapat dijalankan di IE, tetapi tidak di Firefox. Hal ini karena acara Firefox hanya dapat digunakan di tempat terjadinya peristiwa.
Solusi: Tambahkan parameter peristiwa ke fungsi tempat peristiwa terjadi, dan gunakan var myEvent = evt?evt:(window.event?window.event:null) di badan fungsi (dengan asumsi parameter formal adalah evt)
Contoh:
9. Masalah dengan event.x dan event.y
Deskripsi masalah: Di bawah IE, objek genap memiliki atribut x dan y, tetapi tidak ada atribut pageX dan pageY di Firefox, objek genap memiliki atribut pageX dan pageY, tetapi tidak ada atribut x, y.
Solusi: var myX = event.x ? event.x : event.pageX; var myY = event.y ?
Jika Anda mempertimbangkan pertanyaan 8, gunakan saja myEvent alih-alih event.
10. Masalah Event.srcElement
Deskripsi masalah: Di bawah IE, objek genap memiliki atribut srcElement, tetapi tidak ada atribut target di Firefox, objek genap memiliki atribut target, tetapi tidak ada atribut srcElement;
Solusi: Gunakan srcObj = event.srcElement ?
Jika Anda mempertimbangkan pertanyaan 8, gunakan saja myEvent alih-alih event.
11. Masalah Window.location.href
Deskripsi masalah: Di bawah IE atau Firefox2.0.x, Anda dapat menggunakan window.location atau window.location.href di bawah Firefox1.5.x, Anda hanya dapat menggunakan window. lokasi.
Solusi: Gunakan window.location alih-alih window.location.href. Tentu saja, Anda juga dapat mempertimbangkan untuk menggunakan metode location.replace().
12. Masalah jendela modal dan non-modal
Deskripsi masalah: Di bawah IE, jendela modal dan non-modal dapat dibuka melalui showModalDialog dan showModelessDialog di Firefox, ini tidak dapat dilakukan.
Solusi: Langsung gunakan window.open(pageURL,name,parameters) untuk membuka jendela baru.
Jika Anda perlu meneruskan parameter di jendela anak kembali ke jendela induk, Anda dapat menggunakan window.opener di jendela anak untuk mengakses jendela induk. Jika Anda memerlukan jendela induk untuk mengontrol jendela anak, gunakan var subWindow = window.open(pageURL,name,parameters);
13. Masalah frame dan iframe
Ambil contoh frame berikut:
(1) Akses objek bingkai IE: gunakan window.frameId atau window.frameName untuk mengakses objek bingkai;
Firefox: Gunakan window.frameName untuk mengakses objek bingkai ini;
Solusi: Gunakan window.document.getElementById("frameId") secara seragam untuk mengakses objek bingkai ini;
(2) Untuk mengganti konten bingkai, Anda dapat menggunakan window.document.getElementById("frameId").src = "52css.com.html" atau window.frameName.location = "52css.com.html" di IE dan Firefox .
Jika Anda perlu meneruskan parameter dalam bingkai kembali ke jendela induk, Anda dapat menggunakan kata kunci induk dalam bingkai untuk mengakses jendela induk.
14. Masalah pemuatan isi
Deskripsi masalah: Objek body Firefox ada sebelum tag body dibaca sepenuhnya oleh browser; sedangkan objek body IE harus dimuat setelah tag body dibaca sepenuhnya oleh browser.
[Catatan] Masalah ini sebenarnya belum diverifikasi dan akan diubah setelah verifikasi.
[Catatan] Telah diverifikasi bahwa masalah di atas tidak ada di IE6, Opera9 dan FireFox2. Skrip JS sederhana dapat mengakses semua objek dan elemen yang telah dimuat sebelum skrip, meskipun elemen tersebut belum dimuat.
15. Metode delegasi acara
Deskripsi masalah: Di bawah IE, gunakan document.body.onload = inject; di mana fungsi inject() telah diimplementasikan sebelumnya di Firefox, gunakan document.body.onload = inject();
Solusi: Gunakan document.body.onload=new Function('inject()'); atau document.body.onload = function(){/* Berikut kodenya */}
[Catatan] Perbedaan antara Fungsi dan fungsi
16. Perbedaan elemen induk yang diakses
Deskripsi masalah: Di bawah IE, gunakan obj.parentElement atau obj.parentNode untuk mengakses simpul induk dari obj; di bawah Firefox, gunakan obj.parentNode untuk mengakses simpul induk dari obj.
Solusi: Karena firefox dan IE mendukung DOM, obj.parentNode digunakan untuk mengakses node induk dari obj.
17. kursor:tangan VS kursor:penunjuk
Deskripsi masalahnya: Firefox tidak mendukung tangan, tetapi IE mendukung penunjuk. Keduanya merupakan instruksi tangan.
Solusi: Gunakan pointer secara seragam.
18. Masalah dengan innerText.
Deskripsi masalah: innerText berfungsi normal di IE, tetapi innerText tidak berfungsi di FireFox.
Solusi: Gunakan textContent alih-alih innerText di browser non-IE.
Contoh:
Contoh Kode Sumber [www.downcodes.com] if(navigator.appName.indexOf("Penjelajah") >-1){
document.getElementById('element').innerText = "teks saya";
} kalau tidak{
document.getElementById('element').textContent = "teks saya";
}
19. Masalah penetapan lebar dan tinggi objek
Deskripsi masalah: Pernyataan yang mirip dengan obj.style.height = imgObj.height di FireFox tidak valid.
Solusi: Gunakan obj.style.height = imgObj.height + 'px';
20. Masalah operasi tabel
Deskripsi masalah: IE, Firefox dan browser lain memiliki operasi berbeda pada tag tabel. Di IE, penugasan tabel dan tr innerHTML tidak diperbolehkan metode appendChild juga tidak berfungsi.
Larutan:
Contoh Kode Sumber [www.downcodes.com] //Tambahkan baris kosong ke tabel:
var baris = otable.insertRow(-1);
var sel = dokumen.createElement("td");
sel.innerHTML = "";
sel.className = "XXXX";
baris.appendChild(sel);
21. Masalah indentasi daftar ul dan ol
Saat menghilangkan indentasi daftar ul, ol dan lainnya, gayanya harus ditulis sebagai: list-style:none;margin:0px;padding:0px;
Atribut margin valid untuk IE, dan atribut padding valid untuk FireFox. ← Kalimat ini salah diungkapkan, silakan lihat ↓ untuk detailnya
[Catatan] Masalah ini sebenarnya belum diverifikasi dan akan diubah setelah verifikasi.
[Catatan] Telah diverifikasi bahwa di IE, pengaturan margin:0px dapat menghapus indentasi atas, bawah, kiri dan kanan, kosong, dan daftar nomor atau titik dalam daftar.Pengaturan padding tidak berpengaruh pada gaya di Firefox, pengaturan margin:0px hanya dapat menghapus indentasi atas dan bawah. Setelah mengatur padding:0px, Anda hanya dapat menghapus indentasi kiri dan kanan. Anda juga harus mengatur list-style:none untuk menghapus nomor atau titik daftar. Dengan kata lain, di IE, hanya margin:0px yang dapat disetel untuk mencapai efek akhir, sedangkan di Firefox, margin:0px, padding:0px, dan list-style:none harus disetel secara bersamaan untuk mencapai efek akhir.
22. Masalah transparansi CSS YAITU: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF: opasitas: 0,6.
[Catatan] Yang terbaik adalah menulis keduanya dan meletakkan atribut opacity di bawah.
23. Masalah sudut membulat CSS IE: versi di bawah ie7 tidak mendukung sudut membulat.
FF: -moz-border-radius:4px, atau -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius-kanan bawah:4px;.
[Catatan] Masalah sudut membulat adalah masalah klasik dalam CSS. Disarankan untuk menggunakan kumpulan bingkai JQuery untuk mengatur sudut membulat dan menyerahkan masalah rumit ini kepada orang lain.
Ada terlalu banyak masalah dalam CSS, dan bahkan definisi CSS yang sama memiliki efek tampilan berbeda dalam standar halaman berbeda. Untuk pengetahuan lebih lanjut, silakan merujuk ke artikel di 52CSS.com. Saran yang sejalan dengan pengembangan adalah bahwa halaman harus ditulis menggunakan standar DHTML standar, dengan lebih sedikit penggunaan tabel. Definisi CSS harus sebisa mungkin didasarkan pada DOM standar, dengan mempertimbangkan browser utama seperti IE , Firefox, dan Opera. BTW, dalam banyak kasus, standar interpretasi CSS FF dan Opera lebih dekat dengan standar CSS dan lebih normatif. 