JAVASCRIPT Enregistrements d'écriture compatibles dans IE et échange FF_Experience

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

enabled: optional . Boolescher Wert. Legt fest oder ruft ab, ob der Filter aktiv ist. true: Standardwert. Filter aktiviert. false: Filter ist deaktiviert.
Größenmethode: optional. Zeichenfolge. Legt fest oder ruft ab, wie das Bild des gefilterten Objekts innerhalb der Grenzen des Objektcontainers angezeigt wird. Zuschneiden: Bild zuschneiden, um es an die Objektgröße anzupassen. Bild: Standardwert. Erhöhen oder verkleinern Sie die Größengrenzen des Objekts, um es an die Abmessungen des Bildes anzupassen. Skalieren: Skalieren Sie das Bild so, dass es in die Größengrenzen des Objekts passt.
src: erforderlich. Zeichenfolge. Geben Sie das Hintergrundbild mit einer absoluten oder relativen URL-Adresse an. Wenn dieser Parameter weggelassen wird, hat der Filter keine Wirkung.

Firefox kann innerText nicht unterstützen
Firefox unterstützt innerHTML, aber nicht innerText. Es unterstützt textContent zur Implementierung von innerText, aber die zusätzlichen Leerzeichen werden standardmäßig ebenfalls beibehalten. Wenn textContent nicht verwendet wird, kann stattdessen innerHTML verwendet werden, wenn die Zeichenfolge keinen HTML-Code enthält.

Auswahl von Webinhalten verbieten
Im Allgemeinen js im IE verwenden: obj.onselectstart=function(){return false;}
Und Firefox verwendet CSS:-moz-user -select:none

Filterunterstützung (Beispiel: Transparenzfilter)
IE: filter: alpha(opacity=10);
firefox: -moz-opacity :.10 ;

Ereignisse erfassen
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true );
document.removeEventListener("mousemove",mousemovefunction,true);

Mausposition abrufen
IE: event.clientX, event.clientY
firefox: Das Ereignis Die Funktion muss das Ereignisobjekt
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

DIV und andere übergeben Elemente Randprobleme
Zum Beispiel: Festlegen des CSS eines Div: {width:100px;height:100px;border:#000000 1px solid;}
Im IE: die Breite des Div (einschließlich der Randbreite): 100px, die Höhe des Div (einschließlich der Randbreite): 100px und Firefox: die Breite des Div (einschließlich der Randbreite): 102px, die Höhe des Div (einschließlich der Randbreite). ): 102px;


Judgement Browser type
var isIE=document.all ? true : false;Ich habe eine Variable geschrieben, wenn die document.all-Syntax dann unterstützt wird isIE=true, andernfalls isIE=false


CSS-Verarbeitung unter verschiedenen BrowsernIm Allgemeinen können Sie !important verwenden, um die Verwendung von CSS-Anweisungen zu priorisieren (wird nur von Firefox unterstützt)
Zum Beispiel: {border-width:0px!important;border-width: 1px;}
Dieses Element hat keinen Rahmen unter Firefox, aber die Rahmenbreite beträgt 1px unter IE


Dokument. formName.item("itemName") Problem
Problem Hinweis: Unter IE können Sie document.formName.item("itemName") oder document.formName.elements ["elementName"] verwenden kann nur document.formName.elements["elementName"] verwenden. Lösung: document.formName.elements["elementName"] einheitlich verwenden.


Problem mit SammlungsobjektenProblembeschreibung: Unter IE können Sie () oder [] verwenden, um Sammlungsobjekte abzurufen; unter Firefox können Sie nur [] verwenden, um Sammlung abzurufen Objekte.
Lösung: Verwenden Sie [] einheitlich, um Sammlungsobjekte zu erhalten.


Problem mit benutzerdefinierten AttributenProblembeschreibung: Unter IE können Sie die Methode zum Abrufen regulärer Attribute verwenden, um benutzerdefinierte Attribute abzurufen, oder Sie können getAttribute() verwenden, um benutzerdefinierte Attribute abzurufen. Firefox Unter diesen Umständen können Sie getAttribute() nur verwenden, um benutzerdefinierte Attribute abzurufen.
Lösung: Benutzerdefinierte Attribute über getAttribute() abrufen.


eval("idName")-ProblemProblembeschreibung: Unter IE können Sie eval("idName") oder getElementById("idName") verwenden, um den HTML-Code mit der ID abzurufen idName-Objekt; unter Firefox können Sie nur getElementById("idName") verwenden, um das HTML-Objekt mit der ID von idName abzurufen.
Lösung: Verwenden Sie getElementById("idName") einheitlich, um das HTML-Objekt mit der ID als idName abzurufen.


Das Problem, dass der Variablenname mit der ID eines HTML-Objekts übereinstimmt
Problembeschreibung: Unter IE kann die ID des HTML-Objekts direkt als Untergeordnetes verwendet werden Objektvariablenname des Dokuments, kann jedoch nicht unter Firefox verwendet werden. Unter Firefox können Sie denselben Variablennamen wie die HTML-Objekt-ID verwenden, jedoch nicht unter IE. Lösung: Verwenden Sie document.getElementById("idName") anstelle von document.idName. Es ist am besten, Variablennamen nicht mit derselben HTML-Objekt-ID zu verwenden, um Fehler beim Deklarieren von Variablen zu vermeiden. Fügen Sie immer das Schlüsselwort var hinzu, um Mehrdeutigkeiten zu vermeiden.


const-ProblemProblembeschreibung: Unter Firefox können Sie das Schlüsselwort const oder das Schlüsselwort var zum Definieren von Konstanten verwenden. Unter IE können Sie zum Definieren von Konstanten nur das Schlüsselwort var verwenden .
Lösung: Verwenden Sie das Schlüsselwort var einheitlich, um Konstanten zu definieren.

Problème d'attribut Input.type
Description du problème : L'attribut input.type sous IE est en lecture seule ; mais l'attribut input.type sous Firefox est en lecture-écriture.
Solution : Ne modifiez pas l'attribut input.type. Si vous devez le modifier, vous pouvez d'abord masquer l'entrée d'origine, puis insérer un nouvel élément d'entrée à la même position.

Problème window.event
Description du problème : window.event ne peut être exécuté que sous IE, mais pas sous Firefox En effet, l'événement de Firefox ne peut être exécuté que lorsqu'un événement se produit. .pour une utilisation sur site.
Solution : ajoutez le paramètre d'événement à la fonction où l'événement se produit et utilisez var myEvent = evt?evt:(window.event?window.event:null)
Exemple dans le corps de la fonction (en supposant le paramètre formel est evt) ：
<script><BR>function doSomething(evt) {<BR>var myEvent = evt : (window.event ? window.event : null)<BR>…<BR> ><br><br><STRONG>Problèmes avec event.x et event.y<BR>Description du problème : Sous IE, l'objet pair a les attributs x et y, mais pas les attributs pageX et pageY sous Firefox, l'objet pair a l'attribut pageX, pageY, mais pas d'attributs x, y. <BR>Solution : var myX = event.x ? event.x : event.pageX;var myY = event.y :event.pageY;<BR>Si vous considérez la question 8, utilisez plutôt myEvent. . <br><br><STRONG>Problème event.srcElement<BR>Description du problème : Sous IE, l'objet pair a l'attribut srcElement, mais pas d'attribut target ; sous Firefox, l'objet pair a l'attribut target, mais aucun attribut srcElement. <BR>Solution : utilisez srcObj = event.srcElement ? event.srcElement : event.target;<BR>Si vous considérez la question 8, utilisez simplement myEvent au lieu de event. <br><br><STRONG>Problème window.location.href<BR>Description du problème : Sous IE ou Firefox2.0.x, vous pouvez utiliser window.location ou window.location.href Firefox1.5 ; x Dans cette condition, seul window.location peut être utilisé. <BR>Solution : utilisez window.location au lieu de window.location.href. Bien entendu, vous pouvez également envisager d’utiliser la méthode location.replace(). <br><br><STRONG>Problèmes avec les fenêtres modales et non modales<BR>Description du problème : Sous IE, les fenêtres modales et non modales peuvent être ouvertes via showModalDialog et showModelessDialog sous Firefox, ce n'est pas possible ; . <BR>Solution : utilisez directement window.open(pageURL,name,parameters) pour ouvrir une nouvelle fenêtre. <BR>Si vous devez transmettre les paramètres de la fenêtre enfant à la fenêtre parent, vous pouvez utiliser window.opener dans la fenêtre enfant pour accéder à la fenêtre parent. Si vous avez besoin de la fenêtre parent pour contrôler la fenêtre enfant, utilisez var subWindow = window.open(pageURL,name,parameters); pour obtenir l'objet fenêtre nouvellement ouvert. <br><br><STRONG>Problèmes de frame et iframe<BR>Prenons le frame suivant comme exemple : <BR><frame src=”xxx.html” id=”frameId” name=”frameName” /><BR>(1) Accédez à l'objet frame<BR>IE : utiliser la fenêtre .frameId Ou window.frameName pour accéder à cet objet frame ; <BR>Firefox : utilisez window.frameName pour accéder à cet objet frame <BR>Solution : utilisez window.document.getElementById("frameId") uniformément pour accéder à cet objet frame ; <br><br>(2) Changer le contenu du cadre<BR>Dans IE et Firefox, vous pouvez utiliser window.document.getElementById("frameId").src = "xxx.html" ou window.frameName.location = " xxx. html" pour changer le contenu du cadre ; <BR> Si vous devez transmettre les paramètres du cadre à la fenêtre parent, vous pouvez utiliser le mot-clé parent dans le cadre pour accéder à la fenêtre parent. <br><br><STRONG>Problème de chargement du corps<BR>Description du problème : l'objet body de Firefox existe avant que la balise body ne soit entièrement lue par le navigateur alors que l'objet body d'IE doit être dans la balise body. Il n'existe pas ; jusqu'à ce qu'il soit complètement lu par le navigateur. <BR>[Note] Ce problème n'a pas encore été vérifié et sera modifié après vérification. <BR>[Note] Il a été vérifié que le problème ci-dessus n'existe pas dans IE6, Opera9 et FireFox2. Un simple script JS peut accéder à tous les objets et éléments qui ont été chargés avant le script, même si l'élément n'a pas été chargé. encore. <br><br><STRONG>Méthode de délégation d'événement<BR>Description du problème : sous IE, utilisez document.body.onload = inject ; là où la fonction inject() a déjà été implémentée sous Firefox, utilisez document.body ; .onload = inject();<BR>Solution : utilisez document.body.onload=new Function("inject()"); ou document.body.onload = function(){/* Voici le code */}<BR>[Note] La différence entre Function et function<br><br><STRONG>La différence dans l'élément parent accédé<BR>Description du problème : sous IE, utilisez obj.parentElement ou obj.parentNode Accédez au parent nœud d'obj ; sous Firefox, utilisez obj.parentNode pour accéder au nœud parent d'obj. <BR>Solution : étant donné que Firefox et IE prennent en charge DOM, obj.parentNode est utilisé uniformément pour accéder au nœud parent d'obj.<br><br><STRONG>cursor:hand VS Cursor:pointer<BR>Description du problème : Firefox ne prend pas en charge la main, mais IE prend en charge le pointeur, les deux sont des instructions manuelles. <BR>Solution : utilisez le pointeur de manière uniforme. <br><br><STRONG>Problèmes avec innerText<BR>Description du problème : innerText peut fonctionner normalement dans IE, mais innerText ne fonctionne pas dans FireFox. <BR>Solution : utilisez textContent au lieu de innerText dans les navigateurs non IE. <BR>Exemple : <BR>if(navigator.appName.indexOf("Explorer") >-1){<BR>document.getElementById("element").innerText = "mon texte";<BR>}else{ <BR>document.getElementById("element").textContent = "my text";<BR>}<BR>[Note] innerHTML est pris en charge par les navigateurs tels que IE et Firefox. D'autres, tels que externalHTML, ne sont pris en charge que par. IE., il est préférable de ne pas l'utiliser. <br><br><STRONG>Problème d'attribution de largeur et de hauteur d'objet<BR>Description du problème : les instructions similaires à obj.style.height = imgObj.height dans FireFox ne sont pas valides. <BR>Solution : utilisez obj.style.height = imgObj.height + "px" de manière uniforme ; <br><br><STRONG>Problème de fonctionnement de la table<BR>Description du problème : c'est-à-dire Firefox et autres navigateurs. des balises de table sont différentes. Dans IE, l'affectation innerHTML de table et tr n'est pas autorisée. Lorsque vous utilisez js pour ajouter un tr, la méthode appendChild ne fonctionne pas. <BR>Solution : <BR>//Ajouter une ligne vide au tableau : <BR>var row = otable.insertRow(-1);<BR>var cell = document.createElement("td");<BR> cell.innerHTML = "";<BR>cell.className = "XXXX";<BR>row.appendChild(cell);<BR>[Note] Comme j'utilise rarement JS pour faire fonctionner directement des tables, je n'ai jamais rencontré ce problème . Il est recommandé d'utiliser le framework JS pour faire fonctionner des tables, telles que JQuery. <br><br><STRONG>Problème d'indentation des listes ul et ol<BR>Lors de l'élimination de l'indentation des listes ul, ol et autres, le style doit être écrit comme : list-style:none;margin:0px ;padding:0px ;<BR>L'attribut margin est valide pour IE et l'attribut padding est valide pour FireFox. ← Cette phrase est incorrectement formulée. Pour plus de détails, voir ↓<BR>[Note] Ce problème n'a pas encore été vérifié et sera modifié après vérification. <BR>[Remarque] Il a été vérifié que dans IE, la définition de margin:0px peut supprimer les retraits supérieurs, inférieurs, gauche et droit, les espaces et les numéros ou points de liste de la liste. La définition du remplissage n'a aucun effet sur le style ; dans Firefox, en définissant margin:0px uniquement. Vous pouvez supprimer les espaces supérieur et inférieur. Après avoir défini padding:0px, vous ne pouvez supprimer que les retraits gauche et droit. Vous devez également définir list-style:none pour supprimer les numéros ou les points de la liste. En d'autres termes, dans IE, seul margin:0px peut être défini pour obtenir l'effet final, tandis que dans Firefox, margin:0px, padding:0px et list-style:none doivent être définis en même temps pour obtenir l'effet final. <br><br><STRONG>Problème de transparence CSS<BR>IE : filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). <BR>FF:opacité:0,6. <BR>[Note] Il est préférable d'écrire les deux et de mettre l'attribut d'opacité ci-dessous. <br><br><STRONG>Problème de coins arrondis CSS<BR>IE : les versions inférieures à ie7 ne prennent pas en charge les coins arrondis. <BR>FF : -moz-border-radius:4px, ou -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border-radius-bottomright:4px;. <BR>[Note] Le problème des coins arrondis est un problème classique en CSS. Il est recommandé d'utiliser le jeu de cadres JQuery pour définir les coins arrondis et laisser ces problèmes complexes à d'autres.</script>