1.Firefox tidak dapat mendukung Innertext.
Firefox mendukung InnerHTML tetapi tidak mendukung Innertext. Ini mendukung TextContent untuk mengimplementasikan Innertext, tetapi ruang yang tidak perlu juga disimpan secara default. Jika Anda tidak menggunakan TextContent, jika string tidak berisi kode HTML, Anda juga dapat menggunakan InnerHTML sebagai gantinya.
2. Dilarang memilih konten halaman web:
Di IE, JS umumnya digunakan: obj.onselectStart = function () {return false;}
Firefox menggunakan CSS: -Moz-Pengguna-Select: tidak ada
3. Dukungan Filter (Contoh: Filter Transparan):
Yaitu: filter: alpha (opacity = 10);
Firefox: -Moz-opacity: .10;
4. Acara Capture:
Yaitu: obj.setCapture (), obj.releasecapture ()
Firefox: document.addeventlistener ("mousemove", mousemovefunction, true);
document.removeeventlistener ("mousemove", mousemovefunction, true);
5. Dapatkan posisi mouse:
IE: event.clientx, event.clienty
Firefox: Fungsi peristiwa perlu lulus objek acara
obj.onmouseMove = function (ev) {
X = ev.pagex; y = ev.pagey;
}
6. Masalah batas elemen seperti div:
Misalnya: Tetapkan CSS :: {lebar: 100px; tinggi: 100px; Border:#000000 1px padat;}
Dalam IE: lebar div (termasuk lebar perbatasan): 100px, ketinggian div (termasuk lebar perbatasan): 100px;
Dan Firefox: lebar div (termasuk lebar perbatasan): 102px, ketinggian div (termasuk lebar perbatasan): 102px;
Jadi saat melakukan jendela seret ini yang kompatibel dengan IE dan Firefox, Anda harus menggunakan otak Anda untuk menulis JS dan CSS, dan memberi Anda dua tips
1. Tentukan jenis browser:
var isie = document.all? Benar: false;
Saya menulis variabel, jika dokumen. Semua sintaks didukung maka isie = true, jika tidak iSie = false
2. Pemrosesan CSS di browser yang berbeda:
Secara umum, Anda dapat menggunakan! Penting untuk memprioritaskan pernyataan CSS (hanya didukung oleh Firefox)
Misalnya: {border-width: 0px! Penting; perbatasan-lebar: 1px;}
Di bawah Firefox, elemen ini tidak memiliki perbatasan, dan di bawah IE, lebar perbatasan adalah 1px
1.document.formname.item ("itemName") masalah
Deskripsi Masalah: Di IE, Anda dapat menggunakan Document.FormName.Item ("ItemName") atau Document.FormName.elements ["ElementName"]; Di Firefox, Anda hanya dapat menggunakan Document.FormName.elements ["ElementName"].
Solusi: Gunakan Document.FormName.elements ["ElementName"] dengan cara yang disatukan.
2. Masalah Objek Koleksi
Deskripsi Masalah: Di IE, Anda dapat menggunakan () atau [] untuk mendapatkan objek kelas koleksi; Di Firefox, Anda hanya dapat menggunakan [] untuk mendapatkan objek kelas pengumpulan.
Solusi: Gunakan [] untuk mendapatkan objek kelas pengumpulan dengan cara terpadu.
3. Masalah atribut khusus
Deskripsi Masalah: Dalam IE, Anda dapat menggunakan metode mendapatkan 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.
Penanganan masalah: Dapatkan secara seragam atribut khusus melalui getAttribute ().
4. Masalah Eval ("Idname")
Deskripsi Masalah: Dalam IE, Anda dapat menggunakan eval ("IDName") atau GetElementById ("IDName") untuk mendapatkan objek HTML dengan IDNAME; Di Firefox, Anda hanya dapat menggunakan GetElementById ("IdName") untuk mendapatkan objek HTML dengan IDNAME.
Solusi: Gunakan getElementById ("IDName") untuk mendapatkan objek HTML dengan ID sebagai IDName.
5. Masalah dengan nama variabel yang sama dengan ID objek HTML
Deskripsi Masalah: Di bawah IE, ID objek HTML dapat digunakan secara langsung sebagai nama variabel dari objek bawahan dokumen, tetapi tidak di Firefox; Di bawah Firefox, nama variabel yang sama dengan ID objek HTML dapat digunakan, tetapi tidak dalam IE.
Penanganan masalah: Gunakan Document.GetElementById ("IDName") bukan Document.idname. Yang terbaik adalah tidak mengambil nama variabel dengan ID objek HTML yang sama untuk mengurangi kesalahan; Saat mendeklarasikan variabel, tambahkan kata kunci VAR untuk menghindari ambiguitas.
6. Masalah yang lebih baik
Deskripsi Masalah: Di Firefox, Anda dapat menggunakan kata kunci Const atau kata kunci VAR untuk mendefinisikan konstanta; Dalam IE, Anda hanya dapat menggunakan kata kunci VAR untuk mendefinisikan konstanta.
Solusi: Gunakan kata kunci VAR untuk mendefinisikan konstanta secara seragam.
7. Masalah atribut input.Type
Deskripsi Masalah: Properti Input.Type di bawah IE hanya baca; tetapi properti input.
Solusi: Jangan ubah properti input.Type. Jika Anda harus memodifikasinya, Anda dapat menyembunyikan input asli terlebih dahulu dan kemudian memasukkan elemen input baru di posisi yang sama.
8.window.event Masalah
Deskripsi Masalah: Window.event hanya dapat berjalan di bawah IE, bukan di Firefox, karena acara Firefox hanya dapat digunakan di adegan di mana peristiwa terjadi.
Solusi: Tambahkan parameter acara ke fungsi di mana peristiwa terjadi, dan gunakan var myevent = evt? Evt: (window.event? Window.event: null)
Contoh:
Salinan kode adalah sebagai berikut:
<input type = "tombol" onclick = "dosomething (event)"/>
<bahasa skrip = "javascript">
function dosomething (evt) {
var myevent = evt? evt: (window.event? window.event: null)
...
}
9. Event.x dan Event.y Masalah
Deskripsi Masalah: Di bawah IE, objek genap memiliki atribut X dan Y, tetapi tidak ada atribut Pagex dan Pagey; Di bawah Firefox, objek genap memiliki atribut Pagex dan Pagey, tetapi tidak ada atribut X dan Y.
Solusi: var myx = event.x? event.x: event.pagex; var myy = event.y? event.y: event.pagey;
Jika Anda mempertimbangkan masalah ke -8, cukup gunakan MyEvent alih -alih acara.
10.event.srcelement Masalah
Deskripsi Masalah: Di bawah IE, objek genap memiliki properti srcelement, tetapi tidak ada properti target; Di bawah Firefox, objek genap memiliki properti target, tetapi tidak ada properti srcelement.
Solusi: Gunakan srcobj = event.srcelement? event.srcelement: event.target;
Jika Anda mempertimbangkan masalah ke -8, cukup gunakan MyEvent alih -alih acara.
11.window.location.href Masalah
Deskripsi Masalah: Di IE atau Firefox2.0.x, Anda dapat menggunakan window.location atau window.location.href; Di firefox1.5.x, Anda hanya dapat menggunakan window.location.
Penanganan masalah: Gunakan window.location bukan window.location.href. Tentu saja, Anda juga dapat mempertimbangkan menggunakan metode location.replace ().
12. Masalah Modal dan Jendela Non-Modal
Deskripsi Masalah: Di bawah Windows IE, Modal dan Non-Modal dapat dibuka melalui Showmodaldialog dan ShowmodelessDialog; Di bawah Firefox, itu tidak bisa.
Solusi: Gunakan window.open (pageUrl, nama, parameter) 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 jendela induk perlu mengontrol jendela anak, gunakan var subwindow = window.open (pageUrl, name, parameter); Untuk mendapatkan objek jendela yang baru dibuka.
13. Masalah frame dan iframe
Bingkai berikut adalah contoh:
<frame src = "xxx.html" id = "frameid" name = "frameName" />
(1) Objek bingkai akses
Yaitu: gunakan window.frameid atau window.frameName untuk mengakses objek bingkai ini;
Firefox: Gunakan Window.Framename untuk mengakses objek bingkai ini;
Solusi: Gunakan window.document.getElementById ("frameid") untuk mengakses objek bingkai ini;
(2) Beralih konten bingkai
Baik di IE dan Firefox, Anda dapat menggunakan window.document.getElementById ("frameid"). Src = "xxx.html" atau window.frameName.location = "xxx.html" untuk mengganti konten bingkai;
Jika Anda perlu meneruskan parameter dalam bingkai kembali ke jendela induk, Anda dapat menggunakan kata kunci induk di bingkai untuk mengakses jendela induk.
14. Masalah pemuatan tubuh
Deskripsi Masalah: Objek tubuh Firefox ada sebelum tag tubuh sepenuhnya dibaca oleh browser; Sementara objek tubuh IE harus ada setelah tag tubuh sepenuhnya dibaca oleh browser.
[Catatan] Masalah ini belum benar -benar diverifikasi, dan akan dimodifikasi setelah verifikasi.
[Catatan] Telah terbukti 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, bahkan jika elemen ini belum dimuat.
15. Metode Delegasi Acara
Deskripsi Masalah: Dalam IE, gunakan Document.Body.onload = inject; di mana fungsi suntikan () telah diimplementasikan sebelum ini; Di Firefox, gunakan document.body.onload = inject ();
Solusi: Gunakan document.body.onload = fungsi baru ('inject ()'); atau document.body.onload = function () {/* Berikut ini kode*/}
[Catatan] Perbedaan antara fungsi dan fungsi
16. Perbedaan antara elemen induk yang diakses
Deskripsi Masalah: Di bawah IE, gunakan obj.parentelement atau obj.parentnode untuk mengakses simpul induk OBJ; Di bawah Firefox, gunakan obj.parentnode untuk mengakses simpul induk OBJ.
Solusi: Karena Firefox dan IE mendukung DOM, OBJ.PARENTNODE digunakan untuk mengakses simpul induk OBJ.
17. Cursor: Tangan vs Kursor: Pointer
Deskripsi Masalah: Firefox tidak mendukung tangan, tetapi IE mendukung pointer, keduanya adalah indikator berbentuk tangan.
Solusi: Gunakan pointer dengan cara yang disatukan.
18. Masalah dengan Innertext.
Deskripsi Masalah: Innertext berfungsi dengan baik di IE, tetapi Innertext tidak berfungsi di Firefox.
Solusi: Gunakan TextContent alih-alih Innertext di browser non -e.
Contoh:
Salinan kode adalah sebagai berikut:
if (navigator.appname.indexof ("explorer")> -1) {
document.geteLementById ('elemen'). Innertext = "My Text";
} kalau tidak{
document.geteLementById ('elemen'). TextContent = "My Text";
}
[Catatan] InnerHTML didukung oleh browser seperti IE dan Firefox. Lainnya, seperti outerhtml, hanya didukung oleh IE, jadi sebaiknya tidak menggunakannya.
19. Lebar objek dan masalah penugasan tinggi
Deskripsi Masalah: Pernyataan yang mirip dengan obj.style.height = imgobj.height di firefox tidak valid.
Solusi: Gunakan obj.style.height = imgobj.height + 'px' dalam seragam;
20. Masalah Operasi Tabel
Deskripsi Masalah: IE, Firefox dan browser lainnya memiliki operasi yang berbeda pada tag tabel. Dalam IE, tidak diizinkan untuk menetapkan nilai innerHTML ke tabel dan tr. Saat menggunakan JS, menggunakan metode AppendChild tidak berfungsi.
Larutan:
Salinan kode adalah sebagai berikut:
// Tambahkan baris kosong ke tabel:
var row = otable.InserTrow (-1);
var cell = document.createElement ("td");
cell.innerhtml = "";
cell.classname = "xxxx";
Row.AppendChild (sel);
[Catatan] Karena saya jarang menggunakan JS untuk mengoperasikan tabel secara langsung, saya tidak pernah mengalami masalah ini. Disarankan untuk menggunakan set kerangka kerja JS untuk memanipulasi tabel, seperti jQuery.
21. Masalah lekukan daftar ul dan ol
Saat menghilangkan lekukan daftar seperti UL, OL, dll., Gaya harus ditulis sebagai: List-style: tidak ada; margin: 0px; padding: 0px;
Atribut margin berlaku untuk IE dan atribut padding berlaku untuk Firefox. ← Kalimat ini salah, lihat detail ↓
[Catatan] Masalah ini belum benar -benar diverifikasi, dan akan dimodifikasi setelah verifikasi.
[Catatan] Telah terbukti bahwa dalam IE, pengaturan margin: 0px dapat menghapus indentasi kiri dan bawah, kosong, nomor daftar atau titik -titik dari daftar, dan pengaturan bantalan tidak berpengaruh pada gaya; Di Firefox, pengaturan margin: 0px hanya dapat menghapus ruang putih atas dan ke bawah, dan setelah pengaturan padding: 0px hanya dapat menghapus indentasi kiri dan kanan, dan Anda juga harus mengatur gaya daftar: Tidak ada yang menghapus nomor daftar atau titik. Dengan kata lain, dengan IE, Anda dapat mencapai efek akhir dengan hanya menetapkan margin: 0px, padding: 0px dan gaya daftar: Tidak ada yang harus diatur pada saat yang sama di Firefox untuk mencapai efek akhir.
22. Masalah Transparansi CSS
IE: Filter: Progid: dximagetransform.microsoft.alpha (style = 0, opacity = 60).
FF: Opacity: 0.6.
[Catatan] Yang terbaik adalah menulis keduanya dan menempatkan atribut opacity di bawah ini.
23. Masalah sudut bulat CSS
IE: Versi IE7 berikut tidak mendukung sudut bulat.
Ff: -moz-border-radius: 4px, atau -moz-border-radius-topleft: 4px; -Moz-border-radius-topright: 4px; -Moz-border-radius-Bottomleft: 4px; -Moz-border-radius-bottomright: 4px;.
[Catatan] Masalah sudut bulat adalah masalah klasik di CSS. Disarankan untuk menggunakan kerangka kerja jQuery yang ditetapkan untuk mengatur sudut -sudut bulat untuk meninggalkan masalah rumit ini untuk dipikirkan orang lain.
Ada terlalu banyak pertanyaan tentang CSS, dan bahkan definisi CSS yang sama memiliki efek tampilan yang berbeda dalam standar halaman yang berbeda. Saran yang cocok adalah bahwa halaman ini ditulis dalam standar DHTML standar, dan penggunaan tabel jarang digunakan. Definisi CSS harus didasarkan pada DOM standar sebanyak mungkin, dan browser arus utama seperti IE, Firefox, dan Opera juga diperhitungkan. BTW, dalam banyak kasus, standar interpretasi CSS FF dan Opera lebih dekat dengan standar CSS dan lebih terstandarisasi.