JAVASCRIPT-kompatible Schreibaufzeichnungen im IE- und FF_Experience-Austausch-CSS-Tutorial-php.cn

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 est requise pour 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 la largeur de la bordure) : 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 bordure) width): 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 then 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, vous ne pouvez 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 is evt) ：
<script> function doSomething(evt) { var myEvent = evt ? window.event : null) … } Masalah dengan event.x dan event.y 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. Penyelesaian: var myX = event.x ? event.x : event.pageX;var myY = event.y ? . event.srcElement problemPerihalan 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. Penyelesaian: Gunakan srcObj = event.srcElement ? event.srcElement : event.target; Jika anda mempertimbangkan soalan ke-8, hanya gunakan myEvent dan bukannya acara. masalah window.location.hrefPenerangan 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. Penyelesaian: Gunakan window.location dan bukannya window.location.href. Sudah tentu, anda juga boleh mempertimbangkan untuk menggunakan kaedah location.replace(). Masalah dengan tetingkap modal dan bukan modalPenerangan masalah: Di bawah IE, tetingkap modal dan bukan modal boleh dibuka melalui showModalDialog dan showModelessDialog di bawah Firefox, ini tidak boleh dilakukan . 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); Isu bingkai dan iframeAmbil bingkai berikut sebagai contoh: <frame src=”xxx.html” id=”frameId” name=”frameName” />(1) Akses objek bingkai IE: gunakan tetingkap .frameId Atau window.frameName untuk mengakses objek bingkai ini; Firefox: Gunakan window.frameName 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. masalah pemuatan badan 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. [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. Kaedah delegasi acara 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 */} [Nota] Perbezaan antara Fungsi dan fungsi Perbezaan dalam elemen induk yang diakses 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. Cursor:Hand VS Cursor:Zeiger Problembeschreibung: Firefox unterstützt keine Hand, aber IE unterstützt Zeiger, beides sind Handanweisungen. Lösung: Zeiger einheitlich verwenden. Probleme mit innerText Problembeschreibung: innerText kann normal im IE funktionieren, innerText funktioniert jedoch nicht in Firefox. Lösung: Verwenden Sie textContent anstelle von innerText in Nicht-IE-Browsern. Beispiel: if(navigator.appName.indexOf("Explorer") >-1){ document.getElementById("element").innerText = "my text"; }else{ document.getElementById("element").textContent = "my text"; } [Hinweis] innerHTML wird von Browsern wie IE und Firefox unterstützt. Andere, wie äußereHTML, werden nur von unterstützt IE. Es ist am besten, es nicht zu verwenden. Problem bei der Zuweisung von Objektbreite und -höhe Problembeschreibung: Anweisungen ähnlich wie obj.style.height = imgObj.height in Firefox sind ungültig. Lösung: Verwenden Sie obj.style.height = imgObj.height + „px“ einheitlich; Tabellenoperationsproblem Problembeschreibung: dh Firefox und andere Browser Die Operationen Die Anzahl der Tabellen-Tags ist unterschiedlich. Im IE ist die innerHTML-Zuweisung von table und tr nicht zulässig. Wenn js zum Hinzufügen eines tr verwendet wird, funktioniert die appendChild-Methode nicht. Lösung: //Eine leere Zeile an die Tabelle anhängen: var row = otable.insertRow(-1); var cell = document.createElement("td"); cell.innerHTML = „“; cell.className = „XXXX“; row.appendChild(cell); [Hinweis] Da ich JS selten zum direkten Betreiben von Tabellen verwende, bin ich noch nie auf dieses Problem gestoßen . Es wird empfohlen, zum Betrieb von Tabellen ein JS-Framework wie JQuery zu verwenden. Einrückungsproblem von ul- und ol-Listen Beim Eliminieren der Einrückung von ul-, ol- und anderen Listen sollte der Stil wie folgt geschrieben werden: list-style:none;margin:0px ;padding:0px ; Das Margin-Attribut ist für IE gültig und das Padding-Attribut ist für Firefox gültig. ← Dieser Satz ist falsch angegeben. Weitere Informationen finden Sie unter ↓ [Hinweis] Dieses Problem wurde nicht tatsächlich überprüft und wird nach der Überprüfung geändert. [Hinweis] Es wurde bestätigt, dass die Einstellung „margin:0px“ die oberen, unteren, linken und rechten Einzüge, Leerzeichen und Listennummern oder Punkte der Liste entfernen kann, ohne dass dies Auswirkungen auf den Stil hat. In Firefox können Sie nur die oberen und unteren Leerzeichen entfernen. Nach dem Festlegen von padding:0px können Sie nur die linken und rechten Einzüge entfernen. Sie müssen auch list-style:none festlegen, um Listennummern oder Punkte zu entfernen. Mit anderen Worten: Im IE kann nur margin:0px festgelegt werden, um den endgültigen Effekt zu erzielen, während in Firefox margin:0px, padding:0px und list-style:none gleichzeitig festgelegt werden müssen, um den endgültigen Effekt zu erzielen. CSS-Transparenzproblem IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). FF:Opazität:0,6. [Hinweis] Es ist am besten, beides zu schreiben und das Deckkraftattribut unten anzugeben. CSS-Problem mit abgerundeten Ecken IE: Versionen unter ie7 unterstützen keine abgerundeten Ecken. FF: -moz-border-radius:4px, oder -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border-radius-bottomright:4px;. [Hinweis] Das Problem mit abgerundeten Ecken ist ein klassisches Problem in CSS. Es wird empfohlen, das JQuery-Frameset zum Festlegen abgerundeter Ecken zu verwenden und diese komplexen Probleme anderen zu überlassen.</script>