1. document.formName.item("itemName") Deskripsi Masalah: Di bawah IE, Anda dapat menggunakan document.formName.item("itemName") atau document.formName.elements ["elementName"]; dokumen .formName.elements["elementName"].
Solusi: Gunakan document.formName.elements["elementName"] secara seragam.
2. Masalah objek koleksi Deskripsi: Di 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 koleksi.
3. Masalah atribut khusus Deskripsi: 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 mendapatkan atribut khusus; .
Solusi: Dapatkan atribut khusus secara seragam melalui getAttribute().
4. 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 hanya dapat menggunakan getElementById(" idName" ) untuk mendapatkan objek HTML dengan id idName.
Solusi: Gunakan getElementById("idName") secara seragam untuk mendapatkan objek HTML dengan id idName.
5. Masalah nama variabel sama dengan ID objek HTML. Deskripsi masalah: Di bawah IE, ID objek HTML dapat digunakan secara langsung sebagai nama variabel objek bawahan dokumen, tetapi tidak di bawah. Firefox; di bawah Firefox, variabel dengan ID yang sama dengan nama objek HTML dapat digunakan, tetapi tidak di bawah 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. Deskripsi Masalah Const: 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 atribut input.type Deskripsi masalah: Atribut input.type di IE bersifat read-only; tetapi 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:
kode program
<input type="button" onclick="doSomething(event)"/>
<skrip bahasa="javascript">
fungsi melakukan Sesuatu(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
</skrip>
9. Event.x dan event.y Deskripsi Masalah: Di bawah IE, objek genap memiliki atribut x dan y, tetapi tidak memiliki atribut pageX dan pageY di Firefox, objek genap memiliki atribut pageX dan pageY, tetapi tidak memiliki atribut x dan 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 bukan atribut target di bawah Firefox, objek genap memiliki atribut target, tetapi tidak memiliki 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.location.
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 mungkin.
Solusi: Langsung gunakan metode 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 i frame mengambil contoh frame berikut:
<frame src=" http://www.abc.com/123.html " id="frameId" name="frameName" />
(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 = "index.html" atau window.frameName.location = "index.html" untuk mengganti konten bingkai di kedua 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 ada 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. Penjelasan masalah metode delegasi acara: 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 antara elemen induk yang diakses Deskripsi pertanyaan: Di bawah IE, gunakan obj.parentElement atau obj.parentNode untuk mengakses simpul induk obj di Firefox, gunakan obj.parentNode untuk mengakses induk obj; simpul.
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:
kode program
if(navigator.appName.indexOf("Penjelajah") >-1){
document.getElementById('element').innerText = "teks saya";
} kalau tidak{
document.getElementById('element').textContent = "teks saya";
}
[Catatan] innerHTML didukung oleh browser seperti IE dan Firefox secara bersamaan. Lainnya, seperti outerHTML, hanya didukung oleh IE dan sebaiknya tidak digunakan.
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 pengoperasian tabel Deskripsi masalah: IE, Firefox, dan browser lain memiliki operasi berbeda pada tag tabel, yang tidak diperbolehkan di IE Untuk penugasan innerHTML dari tabel dan tr, saat menggunakan js untuk menambahkan tr, menggunakan metode appendChild tidak berfungsi.
Larutan:
kode program
//Tambahkan baris kosong ke tabel:
var baris = otable.insertRow(-1);
var sel = dokumen.createElement("td");
sel.innerHTML = "";
sel.className = "XXXX";
baris.appendChild(sel);
[Catatan] Karena saya jarang menggunakan JS untuk mengoperasikan tabel secara langsung, saya tidak pernah mengalami masalah ini. Disarankan untuk menggunakan kerangka JS untuk mengoperasikan tabel, seperti JQuery.
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. 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.