Perbezaan antara js dalam IE dan firefox_Pengetahuan asas

1.firefox tidak boleh menyokong innerText.
Firefox menyokong innerHTML tetapi bukan innerText Ia menyokong textContent untuk melaksanakan innerText, tetapi ruang tambahan juga dikekalkan secara lalai. Jika textContent tidak digunakan, innerHTML boleh digunakan sebaliknya jika rentetan tidak mengandungi kod HTML.

2. Larang pemilihan kandungan web:
Biasanya gunakan js dalam IE: obj.onselectstart=function(){return false;}
Firefox menggunakan CSS:-moz-user-select:none

3. Sokongan penapis (contoh: penapis lutsinar):
IE:filter:alpha(opacity=10);
firefox:-moz-opacity:.10;

4. Tangkapan acara:
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);

5. Dapatkan kedudukan tetikus:
IE: event.clientX, event.clientY
firefox: fungsi acara diperlukan untuk menghantar objek acara
obj.onmousemove=function(ev){
X=ev.pageX;Y=ev.pageY;
}

6. Isu sempadan DIV dan elemen lain:
Contohnya: tetapkan CSS div::{width:100px;height:100px;border:#000000 1px solid;}
Dalam IE: lebar div (termasuk lebar sempadan): 100px, ketinggian div (termasuk lebar sempadan): 100px
Dan firefox: lebar div (termasuk lebar sempadan): 102px, ketinggian div (termasuk lebar sempadan): 102px

Jadi apabila membuat tetingkap seret ini yang serasi dengan IE dan Firefox, anda perlu menggunakan otak anda semasa menulis js dan css Berikut adalah dua petua untuk anda

1. Tentukan jenis penyemak imbas:
var isIE=document.all? true:false;
Saya menulis pembolehubah, jika sintaks document.all disokong maka isIE=true, jika tidak isIE=false

2. Pemprosesan CSS di bawah pelayar yang berbeza:
Secara amnya, anda boleh menggunakan !important untuk mengutamakan penggunaan pernyataan css (hanya disokong oleh firefox)
Contohnya: {border-width:0px!important;border-width:1px;}
Di bawah Firefox, elemen ini tidak mempunyai sempadan Di bawah IE, lebar sempadan ialah 1px

1.document.formName.item("itemName") masalah
Perihalan masalah: Di bawah IE, anda boleh menggunakan document.formName.item("itemName") atau document.formName.elements ["elementName"] di bawah Firefox, anda hanya boleh menggunakan document.formName.elements["elementName"]; .
Penyelesaian: Gunakan document.formName.elements["elementName"] secara seragam.

2. Masalah objek koleksi
Perihalan masalah: Di bawah IE, anda boleh menggunakan () atau [] untuk mendapatkan objek koleksi di bawah Firefox, anda hanya boleh menggunakan [ ] untuk mendapatkan objek koleksi.
Penyelesaian: Gunakan [] secara seragam untuk mendapatkan objek kelas koleksi.

3. Isu atribut tersuai
Perihalan masalah: Di bawah IE, anda boleh menggunakan kaedah mendapatkan atribut biasa untuk mendapatkan atribut tersuai, atau anda boleh menggunakan getAttribute() untuk mendapatkan atribut tersuai di bawah Firefox, anda hanya boleh menggunakan getAttribute() untuk mendapatkan atribut tersuai.
Penyelesaian: Dapatkan atribut tersuai secara seragam melalui getAttribute().

masalah 4.eval("idName")
Perihalan masalah: Di bawah IE, anda boleh menggunakan eval("idName") atau getElementById("idName") untuk mendapatkan objek HTML dengan id idName di bawah Firefox, anda hanya boleh menggunakan getElementById("idName") untuk mendapatkan Objek HTML dengan id idName .
Penyelesaian: Gunakan getElementById("idName") secara seragam untuk mendapatkan objek HTML yang idnya ialah idName.

5. Masalah bahawa nama pembolehubah adalah sama dengan ID objek HTML
Penerangan masalah: Di bawah IE, ID objek HTML boleh digunakan secara langsung sebagai nama pembolehubah objek bawahan dokumen, tetapi tidak di bawah Firefox di bawah Firefox, nama pembolehubah yang sama seperti ID objek HTML boleh digunakan, tetapi tidak di bawah IE.
Penyelesaian: Gunakan document.getElementById("idName") dan bukannya document.idName. Sebaik-baiknya jangan gunakan nama pembolehubah dengan ID objek HTML yang sama untuk mengurangkan ralat semasa mengisytiharkan pembolehubah, sentiasa tambahkan kata kunci var untuk mengelakkan kekaburan.

6.masalah berterusan
Perihalan masalah: Di bawah Firefox, anda boleh menggunakan kata kunci const atau kata kunci var untuk menentukan pemalar di bawah IE, anda hanya boleh menggunakan kata kunci var untuk menentukan pemalar.
Penyelesaian: Gunakan kata kunci var secara seragam untuk menentukan pemalar.

masalah atribut 7.input.type
Perihalan masalah: Atribut input.type di bawah IE ialah baca-sahaja tetapi atribut input.type di bawah Firefox ialah baca-tulis.
Penyelesaian: Jangan ubah suai atribut input.type. Jika anda mesti mengubah suainya, anda boleh menyembunyikan input asal dahulu, dan kemudian memasukkan elemen input baharu pada kedudukan yang sama.

8.tingkap.masalah acara
Perihalan masalah: window.event hanya boleh dijalankan di bawah IE, tetapi bukan di bawah Firefox Ini kerana acara Firefox hanya boleh digunakan di tempat kejadian berlaku.
Penyelesaian: Tambahkan parameter acara pada fungsi tempat peristiwa berlaku dan gunakan var myEvent = evt?evt:(window.event?window.event:null)
dalam badan fungsi (dengan andaian parameter formal ialah evt) Contoh:

Salin kod Kod adalah seperti berikut:

9.Event.x dan isu event.y Perihalan masalah: Di bawah IE, objek genap mempunyai atribut x dan y, tetapi tiada atribut pageX dan pageY di bawah Firefox, objek genap mempunyai atribut pageX dan pageY, tetapi tiada atribut x dan y.

Penyelesaian: var myX = event.x ? event.x : event.pageX; var myY = event.y:event.pageY;
Jika anda mempertimbangkan soalan 8, hanya gunakan myEvent dan bukannya acara.

Masalah 10.event.srcElement

Perihalan masalah: Di bawah IE, objek genap mempunyai atribut srcElement, tetapi bukan atribut sasaran di bawah Firefox, objek genap mempunyai atribut sasaran, tetapi tiada atribut srcElement.

Penyelesaian: gunakan srcObj = event.srcElement ? event.srcElement : event.target;
Jika anda mempertimbangkan soalan 8, hanya gunakan myEvent dan bukannya acara.

masalah 11.window.location.href

Perihalan masalah: Di bawah IE atau Firefox2.0.x, anda boleh menggunakan window.location atau window.location.href di bawah Firefox1.5.x, anda hanya boleh menggunakan window.location.

Penyelesaian: Gunakan window.location dan bukannya window.location.href. Sudah tentu, anda juga boleh mempertimbangkan untuk menggunakan kaedah location.replace().

12. Isu tetingkap modal dan bukan modal

Perihalan masalah: Di bawah IE, tetingkap modal dan bukan modal boleh dibuka melalui showModalDialog dan showModelessDialog tetapi tidak di bawah Firefox.

Penyelesaian: Gunakan terus window.open(pageURL,nama,parameter) untuk membuka tetingkap baharu.
Jika anda perlu menghantar parameter dalam tetingkap anak kembali ke tetingkap induk, anda boleh menggunakan window.opener dalam tetingkap anak untuk mengakses tetingkap induk. Jika anda memerlukan tetingkap induk untuk mengawal tetingkap anak, gunakan var subWindow = window.open(pageURL,name,parameters);

13.Isu bingkai dan iframe

Ambil bingkai berikut sebagai contoh:

(1)Akses objek bingkai
IE: Gunakan window.frameId atau window.frameName untuk mengakses objek bingkai ini; Firefox: Gunakan window.frameName untuk mengakses objek bingkai ini; Penyelesaian: Gunakan window.document.getElementById("frameId") secara seragam untuk mengakses objek bingkai ini;
(2) Tukar kandungan bingkai
Dalam kedua-dua IE dan Firefox, anda boleh menggunakan window.document.getElementById("frameId").src = "xxx.html" atau window.frameName.location = "xxx.html" untuk menukar kandungan bingkai; Jika anda perlu menghantar parameter dalam bingkai kembali ke tetingkap induk, anda boleh menggunakan kata kunci induk dalam bingkai untuk mengakses tetingkap induk.

14.masalah memuatkan badan
Perihalan masalah: Objek badan Firefox wujud sebelum tag badan dibaca sepenuhnya oleh penyemak imbas manakala objek badan IE mesti wujud selepas tag badan dibaca sepenuhnya oleh penyemak imbas.

​​​[Nota] Isu ini sebenarnya belum disahkan dan akan diubah suai selepas pengesahan.

[Nota] Ia telah disahkan bahawa masalah di atas tidak wujud dalam IE6, Opera9 dan FireFox2 Skrip JS mudah boleh mengakses semua objek dan elemen yang telah dimuatkan sebelum skrip, walaupun elemen belum dimuatkan.

15. Kaedah perwakilan acara

Perihalan masalah: Di bawah IE, gunakan document.body.onload = inject; di mana fungsi inject() telah dilaksanakan sebelum ini, gunakan document.body.onload = inject();

Penyelesaian: Gunakan document.body.onload=new Function('inject()'); atau document.body.onload = function(){/* Berikut ialah kod */}
        [Nota] Perbezaan antara Fungsi dan fungsi

16. Perbezaan dalam elemen induk yang diakses

Perihalan masalah: Di bawah IE, gunakan obj.parentElement atau obj.parentNode untuk mengakses nod induk obj di bawah Firefox, gunakan obj.parentNode untuk mengakses nod induk obj.

Penyelesaian: Oleh kerana kedua-dua firefox dan IE menyokong DOM, obj.parentNode digunakan secara seragam untuk mengakses nod induk obj.

17.kursor:tangan VS kursor:penunjuk
Perihalan masalah: Firefox tidak menyokong tangan, tetapi IE menyokong penunjuk kedua-duanya adalah arahan tangan.

Penyelesaian: Gunakan penunjuk secara seragam.

18.Masalah InnerTeks
Penerangan masalah: innerText boleh berfungsi seperti biasa dalam IE, tetapi innerText tidak berfungsi dalam FireFox.

Penyelesaian: Gunakan textContent dan bukannya innerText dalam pelayar bukan IE.

Contoh:

Salin kod


Kod adalah seperti berikut:

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('elemen').innerText = "teks saya"; } lain{
document.getElementById('element').textContent = "teks saya"; }

[Nota] innerHTML disokong oleh pelayar seperti IE dan Firefox pada masa yang sama Lain-lain, seperti outerHTML, hanya disokong oleh IE dan sebaiknya tidak digunakan.

19. Masalah penetapan lebar dan ketinggian objek

Perihalan Masalah: Pernyataan seperti obj.style.height = imgObj.height tidak sah dalam FireFox.

Penyelesaian: Gunakan obj.style.height = imgObj.height 'px';

20. Isu operasi jadual

Penerangan masalah: IE, Firefox dan penyemak imbas lain mempunyai operasi yang berbeza pada teg jadual Dalam IE, penetapan innerHTML jadual dan tr tidak dibenarkan Apabila menggunakan js untuk menambah tr, kaedah appendChild tidak berfungsi.

Penyelesaian:

Salin kod Kod adalah seperti berikut:

//Tambahkan baris kosong pada jadual:

baris var = otable.insertRow(-1); sel var = document.createElement("td"); cell.innerHTML = "";
cell.className = "XXXX"
row.appendChild(sel);


[Nota] Oleh kerana saya jarang menggunakan JS untuk mengendalikan jadual secara terus, saya tidak pernah menghadapi masalah ini. Adalah disyorkan untuk menggunakan rangka kerja JS untuk mengendalikan jadual, seperti JQuery.

21. Masalah lekukan senarai ul dan ol

Apabila menghapuskan lekukan senarai seperti ul dan ol, gaya hendaklah ditulis sebagai: list-style:none;margin:0px;padding:0px Atribut margin adalah sah untuk IE, dan atribut padding adalah sah untuk FireFox. ← Ayat ini dinyatakan secara salah, lihat ↓

untuk butiran ​​​[Nota] Isu ini sebenarnya belum disahkan dan akan diubah suai selepas pengesahan.

[Nota] Telah disahkan bahawa dalam IE, margin tetapan:0px boleh mengalih keluar inden atas, bawah, kiri dan kanan, kosong dan nombor senarai atau titik senarai tidak mempunyai kesan pada gaya dalam Firefox. margin tetapan:0px hanya boleh mengalih keluar inden atas dan bawah Selepas menetapkan padding:0px, anda hanya boleh mengalih keluar inden kiri dan kanan Anda juga mesti menetapkan list-style:none untuk mengalih keluar nombor senarai atau titik. Dalam erti kata lain, dalam IE, hanya margin:0px boleh ditetapkan untuk mencapai kesan akhir, manakala dalam Firefox, margin:0px, padding:0px dan list-style:none mesti ditetapkan pada masa yang sama untuk mencapai kesan akhir.

22. Isu ketelusan CSS
IE: penapis:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF: kelegapan: 0.6.
[Nota] Adalah lebih baik untuk menulis kedua-duanya dan meletakkan atribut kelegapan di bawah.

23. Masalah penjuru bulat CSS
IE: Versi di bawah ie7 tidak menyokong 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- jejari-kanan bawah: 4px;.
[Nota] Masalah sudut bulat ialah masalah klasik dalam CSS. Adalah disyorkan untuk menggunakan set bingkai JQuery untuk menetapkan sudut bulat dan menyerahkan isu kompleks ini kepada orang lain.

Terdapat terlalu banyak masalah dalam CSS, malah definisi CSS yang sama mempunyai kesan paparan yang berbeza dalam piawaian halaman yang berbeza. Cadangan yang sesuai untuk pembangunan ialah halaman harus ditulis menggunakan piawaian DHTML standard, dengan kurang penggunaan jadual, dan takrifan CSS hendaklah berdasarkan DOM standard sebanyak mungkin, dengan mengambil kira pelayar arus perdana seperti IE, Firefox, dan Opera. BTW, dalam banyak kes, piawaian tafsiran CSS FF dan Opera lebih dekat dengan piawaian CSS dan lebih normatif.