JAVASCRIPT Rekod penulisan yang serasi dalam pertukaran IE dan FF_Experience

png transparent AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)

enabled : facultatif . Booléen. Définit ou récupère si le filtre est actif. vrai : valeur par défaut. Filtre activé. false : le filtre est désactivé.
sizingMethod : facultatif. Chaîne. Définit ou récupère la manière dont l'image de l'objet filtré est affichée dans les limites du conteneur d'objets. recadrer : recadrer l'image pour l'adapter à la taille de l'objet. image : valeur par défaut. Augmentez ou diminuez les limites de taille de l'objet pour l'adapter aux dimensions de l'image. échelle : redimensionnez l'image pour qu'elle s'adapte aux limites de taille de l'objet.
src : obligatoire. Chaîne. Spécifiez l'image d'arrière-plan à l'aide d'une adresse URL absolue ou relative. Si ce paramètre est omis, le filtre n'aura aucun effet.

firefox ne peut pas prendre en charge innerText
firefox prend en charge innerHTML mais pas innerText. Il prend en charge textContent pour implémenter innerText, mais les espaces supplémentaires sont également conservés par défaut. Si textContent n'est pas utilisé, innerHTML peut être utilisé à la place si la chaîne ne contient pas de code HTML.

Interdire la sélection de contenu Web
Utilisez généralement js dans IE : obj.onselectstart=function(){return false;}
Et Firefox utilise CSS:-moz-user -select:aucun

Prise en charge du filtre (exemple : filtre de transparence)
IE : filtre : alpha(opacity=10);
firefox : -moz-opacity :.10 ;

Capturer les événements
IE : obj.setCapture(), obj.releaseCapture()
Firefox : document.addEventListener("mousemove",mousemovefunction,true );
document.removeEventListener("mousemove",mousemovefunction,true);

Obtenir la position de la souris
IE : event.clientX, event.clientY
firefox : L'événement la fonction doit transmettre l'objet événement
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

DIV et autres éléments Problèmes de bordure
Par exemple : définir le CSS d'un div : {width:100px;height:100px;border:#000000 1px solid;>
Dans IE : la largeur du div (y compris le border width) : 100px , la hauteur du div (y compris la largeur de la bordure) : 100px ;
et firefox : la largeur du div (y compris la largeur de la bordure) : 102px, la hauteur du div (y compris la largeur de la bordure) ): 102px;

Type de navigateur de jugement
var isIE=document.all ? true : false;
J'ai écrit une variable, si la syntaxe document.all est prise en charge alors isIE=true, sinon isIE=false

Traitement CSS sous différents navigateurs
Généralement, vous pouvez utiliser !important pour prioriser l'utilisation des instructions CSS (uniquement supporté par Firefox)
Par exemple : {border-width:0px!important;border-width: 1px;}
Cet élément n'a pas de bordure sous Firefox, mais la largeur de la bordure est de 1px sous IE

document. formName.item("itemName") Problème
Problème Remarque : Sous IE, vous pouvez utiliser document.formName.item("itemName") ou document.formName.elements ["elementName"] sous Firefox; ne peut utiliser que document.formName.elements["elementName"].
Solution : utilisez document.formName.elements["elementName"] uniformément.

Problème avec les objets de collection
Description du problème : Sous IE, vous pouvez utiliser () ou [] pour obtenir des objets de collection, sous Firefox, vous ne pouvez utiliser que [] pour obtenir une collection ; objets.
Solution : utilisez [] uniformément pour obtenir des objets de collection.

Problème d'attribut personnalisé
Description du problème : sous IE, vous pouvez utiliser la méthode d'obtention d'attributs réguliers pour obtenir des attributs personnalisés, ou vous pouvez utiliser getAttribute() pour obtenir des attributs personnalisés ; Firefox Dans ce cas, vous ne pouvez utiliser getAttribute() que pour obtenir des attributs personnalisés.
Solution : obtenez des attributs personnalisés via getAttribute().

Problème eval("idName")
Description du problème : Sous IE, vous pouvez utiliser eval("idName") ou getElementById("idName") pour obtenir le code HTML avec l'identifiant Objet idName ; sous Firefox, vous pouvez uniquement utiliser getElementById("idName") pour obtenir l'objet HTML avec l'identifiant de idName.
Solution : utilisez getElementById("idName") uniformément pour obtenir l'objet HTML avec l'identifiant comme idName.

Le problème selon lequel le nom de la variable est le même que l'ID d'un objet HTML
Description du problème : sous IE, l'ID de l'objet HTML peut être utilisé directement comme subordonné nom de variable objet du document, mais il ne peut pas être utilisé sous Firefox ; Sous Firefox, vous pouvez utiliser le même nom de variable que l'ID de l'objet HTML, mais pas sous IE.
Solution : utilisez document.getElementById("idName") au lieu de document.idName. Il est préférable de ne pas utiliser de noms de variables avec le même ID d'objet HTML pour réduire les erreurs ; lors de la déclaration des variables, ajoutez toujours le mot-clé var pour éviter toute ambiguïté.

Problème const
Description du problème : Sous Firefox, vous pouvez utiliser le mot-clé const ou le mot-clé var pour définir des constantes, sous IE, vous ne pouvez utiliser que le mot-clé var pour définir des constantes ; .
Solution : utilisez le mot-clé var uniformément pour définir des constantes.

Masalah atribut 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.

masalah window.event
Perihalan masalah: window.event hanya boleh dijalankan di bawah IE, tetapi bukan di bawah Firefox Ini kerana acara Firefox hanya boleh dijalankan apabila sesuatu peristiwa berlaku untuk kegunaan di tapak.
Penyelesaian: Tambahkan parameter acara pada fungsi tempat peristiwa berlaku dan gunakan var myEvent = evt?evt:(window.event?window.event:null)
Contoh dalam badan fungsi (dengan andaian parameter formal ialah evt) ：
<script><BR>fungsi doSomething(evt) {<BR>var myEvent = evt ? window.event : null)<BR>…<BR> }<br><br><STRONG>Masalah dengan event.x dan event.y<BR>Perihalan Masalah: Di bawah IE, objek genap mempunyai atribut x dan y, tetapi bukan atribut pageX dan pageY di bawah Firefox, objek genap mempunyai pageX, atribut pageY, tetapi tiada atribut x, y. <BR>Penyelesaian: var myX = event.x ? event.x : event.pageX;var myY = event.y ? . <BR><br><br>event.srcElement problem<STRONG>Perihalan masalah: Di bawah IE, objek genap mempunyai atribut srcElement, tetapi tiada atribut sasaran di bawah Firefox, objek genap mempunyai atribut sasaran, tetapi tiada atribut srcElement. <BR>Penyelesaian: Gunakan srcObj = event.srcElement ? event.srcElement : event.target;<BR>Jika anda mempertimbangkan soalan 8, hanya gunakan myEvent dan bukannya acara. <BR><br><br>masalah window.location.href<STRONG>Penerangan masalah: Di bawah IE atau Firefox2.0.x, anda boleh menggunakan window.location atau window.location.href; x Di bawah keadaan ini, hanya window.location boleh digunakan. <BR>Penyelesaian: Gunakan window.location dan bukannya window.location.href. Sudah tentu, anda juga boleh mempertimbangkan untuk menggunakan kaedah location.replace(). <BR><br><br>Masalah dengan tetingkap modal dan bukan modal<STRONG>Penerangan masalah: Di bawah IE, tetingkap modal dan bukan modal boleh dibuka melalui showModalDialog dan showModelessDialog di bawah Firefox, ini tidak boleh dilakukan . <BR>Penyelesaian: Gunakan terus window.open(pageURL,nama,parameter) untuk membuka tetingkap baharu. <BR>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); <BR><br><br>Isu bingkai dan iframe<STRONG>Ambil bingkai berikut sebagai contoh: <BR><BR><frame src=”xxx.html” id=”frameId” name=”frameName” />(1) Akses objek bingkai<BR>IE: gunakan tetingkap .frameId Atau window.frameName untuk mengakses objek bingkai ini; <BR>Firefox: Gunakan window.frameName untuk mengakses objek bingkai ini; <BR><BR>(2) Tukar kandungan bingkai<br>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; <br> Jika anda perlu menghantar parameter dalam bingkai kembali ke tetingkap induk, anda boleh menggunakan kata kunci induk dalam bingkai untuk mengakses tetingkap induk. <BR><BR><br>masalah pemuatan badan<br><STRONG>Perihalan masalah: Objek badan Firefox wujud sebelum tag badan dibaca sepenuhnya oleh penyemak imbas manakala objek badan IE mesti berada dalam tag badan Ia tidak wujud sehingga ia dibaca sepenuhnya oleh penyemak imbas. [Nota] Isu ini belum disahkan lagi dan akan diubah suai selepas pengesahan. <BR>[Nota] 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. belum lagi. <BR><BR><br>Kaedah delegasi acara<br><STRONG>Penerangan masalah: Di bawah IE, gunakan document.body.onload = inject di mana fungsi inject() telah dilaksanakan sebelum ini di bawah Firefox, gunakan document.body .onload = inject();Penyelesaian: Gunakan document.body.onload=new Function("inject()"); atau document.body.onload = function(){/* Berikut ialah kod */}<BR>[Nota] Perbezaan antara Fungsi dan fungsi<BR><BR><br>Perbezaan dalam elemen induk yang diakses<br><STRONG>Penerangan masalah: Di bawah IE, gunakan obj.parentElement atau obj.parentNode Akses induk nod obj; di bawah Firefox, gunakan obj.parentNode untuk mengakses nod induk obj. Penyelesaian: Oleh kerana firefox dan IE menyokong DOM, obj.parentNode digunakan secara seragam untuk mengakses nod induk obj.<br><br><STRONG>kursor:tangan VS kursor:penunjuk<BR>Penerangan masalah: Firefox tidak menyokong tangan, tetapi IE menyokong penunjuk, kedua-duanya adalah arahan tangan. <BR>Penyelesaian: Gunakan penunjuk secara seragam. <br><br><STRONG>Masalah dengan innerText<BR>Perihalan masalah: innerText boleh berfungsi seperti biasa dalam IE, tetapi innerText tidak berfungsi dalam FireFox. <BR>Penyelesaian: Gunakan textContent dan bukannya innerText dalam pelayar bukan IE. <BR>Contoh: <BR>if(navigator.appName.indexOf("Explorer") >-1){<BR>document.getElementById("element").innerText = "my text";<BR>}else{ <BR>document.getElementById("element").textContent = "teks saya";<BR>}<BR>[Nota] innerHTML disokong oleh pelayar seperti IE dan Firefox Lain-lain, seperti outerHTML, hanya disokong oleh IE. , adalah lebih baik untuk tidak menggunakannya. <br><br><STRONG>Masalah penetapan lebar dan ketinggian objek<BR>Perihalan masalah: Pernyataan yang serupa dengan obj.style.height = imgObj.height dalam FireFox adalah tidak sah. <BR>Penyelesaian: Gunakan obj.style.height = imgObj.height + “px” secara seragam; <br><br><STRONG>Masalah pengendalian jadual<BR>Perihalan masalah: iaitu, firefox dan penyemak imbas lain Operasi teg jadual adalah berbeza Dalam IE, penetapan innerHTML jadual dan tr tidak dibenarkan Apabila menggunakan js untuk menambah tr, kaedah appendChild tidak berfungsi. <BR>Penyelesaian: <BR>//Tambahkan baris kosong pada jadual: <BR>baris var = otable.insertRow(-1);<BR>var cell = document.createElement("td");<BR> cell.innerHTML = “”;<BR>cell.className = “XXXX”;<BR>row.appendChild(cell);<BR>[Nota] Memandangkan saya jarang menggunakan JS untuk mengendalikan jadual secara langsung, saya tidak pernah menghadapi masalah ini . Adalah disyorkan untuk menggunakan rangka kerja JS untuk mengendalikan jadual, seperti JQuery. <br><br><STRONG>Masalah lekukan senarai ul dan ol<BR>Apabila menghapuskan lekukan ul, ol dan senarai lain, gaya hendaklah ditulis sebagai: list-style:none;margin:0px ;padding:0px ;<BR>Atribut margin adalah sah untuk IE dan atribut padding adalah sah untuk FireFox. ← Ayat ini salah dinyatakan untuk butiran, lihat ↓<BR>[Nota] Isu ini belum lagi disahkan dan akan diubah suai selepas pengesahan. <BR>[Nota] Telah disahkan bahawa dalam IE, tetapan margin:0px boleh mengalih keluar inden atas, bawah, kiri dan kanan, kosong dan nombor senarai atau titik dalam senarai tidak mempunyai kesan pada gaya; dalam Firefox, menetapkan margin:0px sahaja Anda boleh mengalih keluar ruang 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. <br><br><STRONG>Isu ketelusan CSS<BR>IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). <BR>FF:opacity:0.6. <BR>[Nota] Adalah lebih baik untuk menulis kedua-duanya dan meletakkan atribut kelegapan di bawah. <br><br><STRONG>Masalah penjuru bulat CSS<BR>IE: versi di bawah ie7 tidak menyokong penjuru bulat. <BR>FF: -moz-border-radius:4px, atau -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -jejari-sempadan-kanan bawah:4px;. <BR>[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.</script>