1. document.formName.item("itemName") Description du problème : sous IE, vous pouvez utiliser document.formName.item("itemName") ou document.formName.elements ["elementName"] sous Firefox, vous ne pouvez utiliser ; document .formName.elements["elementName"].
Solution : utilisez document.formName.elements["elementName"] uniformément.
2. Problème d'objet de collection Description : Sous IE, vous pouvez utiliser () ou [] pour obtenir des objets de collection ; sous Firefox, vous ne pouvez utiliser que [ ] pour obtenir des objets de collection.
Solution : utilisez [] uniformément pour obtenir des objets de collection.
3. Problème d'attributs personnalisés Description : 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 ; sous Firefox, vous ne pouvez utiliser getAttribute() que pour obtenir des attributs personnalisés ; .
Solution : Obtenez uniformément des attributs personnalisés via getAttribute().
4. eval("idName") Description du problème : Sous IE, vous pouvez utiliser eval("idName") ou getElementById("idName") pour obtenir l'objet HTML avec l'identifiant idName ; sous Firefox, vous ne pouvez utiliser que getElementById(" idName" ) pour obtenir l'objet HTML avec l'identifiant idName.
Solution : utilisez getElementById("idName") uniformément pour obtenir l'objet HTML avec l'identifiant idName.
5. 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 nom de variable de l'objet subordonné du document, mais pas sous Firefox ; sous Firefox, la variable ayant le même identifiant que le nom de l'objet HTML peut être utilisée, mais pas sous IE.
Solution de contournement : 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é.
6. Description du problème Const : 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.
7. 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.
8. 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 utilisé que sur la scène où l'événement se produit.
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) dans le corps de la fonction (en supposant que le paramètre formel est evt)
Exemple :
code de programme
<input type="button" onclick="doSomething(event)"/>
<langage de script="javascript">
fonction faire quelque chose (evt) {
var monEvénement = evt?evt:(window.event?window.event:null)
...
}
</script>
9. Event.x et event.y 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 les attributs pageX et pageY, mais pas d'attributs x et y.
Solution : var myX = event.x ? event.x : event.pageX ; var myY = event.y : event.pageY ;
Si vous considérez la question 8, utilisez simplement myEvent au lieu de event.
10. Problème Event.srcElement Description du problème : Sous IE, l'objet pair a l'attribut srcElement, mais pas l'attribut target ; sous Firefox, l'objet pair a l'attribut target, mais n'a pas l'attribut srcElement.
Solution : Utilisez srcObj = event.srcElement ? event.srcElement : event.target;
Si vous considérez la question 8, utilisez simplement myEvent au lieu de event.
11. Problème Window.location.href Description du problème : Sous IE ou Firefox2.0.x, vous pouvez utiliser window.location ou window.location.href ; sous Firefox1.5.x, vous ne pouvez utiliser que window.location.
Solution de contournement : utilisez window.location au lieu de window.location.href. Bien entendu, vous pouvez également envisager d’utiliser la méthode location.replace().
12. Problèmes de fenêtres modales et non modales 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.
Solution : utilisez directement la méthode window.open(pageURL,name,parameters) pour ouvrir une nouvelle fenêtre.
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.
13. La question du frame et du i frame prend comme exemple le frame suivant :
<frame src=" http://www.abc.com/123.html " id="frameId" name="frameName" />
(1) Accédez à l'objet frame IE : utilisez window.frameId ou window.frameName pour accéder à l'objet frame ;
Firefox : utilisez window.frameName pour accéder à cet objet frame ;
Solution : utilisez window.document.getElementById("frameId") de manière uniforme pour accéder à cet objet frame ;
(2) Pour changer le contenu du cadre, vous pouvez utiliser window.document.getElementById("frameId").src = "index.html" ou window.frameName.location = "index.html" pour changer le contenu du cadre dans les deux IE et Firefox ;
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.
14. Problème de chargement du corps Description du problème : l'objet body de Firefox existe avant que la balise body ne soit entièrement lue par le navigateur, tandis que l'objet body d'IE doit exister après que la balise body soit entièrement lue par le navigateur.
[Note] Ce problème n'a pas été réellement vérifié et sera modifié après vérification.
[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 encore été chargé.
15. Explication du problème de la méthode de délégation d'événements : 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();
Solution : utilisez document.body.onload=new Function('inject()'); ou document.body.onload = function(){/* Voici le code */}
[Note] La différence entre Function et function
16. La différence entre les éléments parents accédés Description de la question : Sous IE, utilisez obj.parentElement ou obj.parentNode pour accéder au nœud parent d'obj sous Firefox, utilisez obj.parentNode pour accéder au parent d'obj ; nœud.
Solution : étant donné que Firefox et IE prennent en charge le DOM, obj.parentNode est utilisé pour accéder au nœud parent d'obj.
17. curseur: main VS curseur: pointeur
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.
Solution : utilisez le pointeur de manière uniforme.
18. Problèmes avec innerText.
Description du problème : innerText fonctionne normalement dans IE, mais innerText ne fonctionne pas dans FireFox.
Solution : utilisez textContent au lieu de innerText dans les navigateurs non IE.
Exemple :
code de programme
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "mon texte";
} autre{
document.getElementById('element').textContent = "mon texte";
}
[Remarque] innerHTML est pris en charge par les navigateurs tels que IE et Firefox en même temps. D'autres, tels que externalHTML, ne sont pris en charge que par IE et il est préférable de ne pas les utiliser.
19. Problème d'affectation de largeur et de hauteur d'objet Description du problème : les instructions similaires à obj.style.height = imgObj.height dans FireFox ne sont pas valides.
Solution : utilisez uniformément obj.style.height = imgObj.height + 'px' ;
20. Problème de fonctionnement de la table Description du problème : IE, Firefox et d'autres navigateurs ont des opérations différentes sur la balise table, ce qui n'est pas autorisé dans IE Pour l'affectation innerHTML. de table et tr, lorsque vous utilisez js pour ajouter un tr, l'utilisation de la méthode appendChild ne fonctionne pas.
Solution:
code de programme
//Ajoute une ligne vide au tableau :
var ligne = otable.insertRow(-1);
var cell = document.createElement("td");
cellule.innerHTML = "";
cellule.className = "XXXX" ;
rangée.appendChild(cellule);
[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.
21. Problème d'indentation des listes ul et ol Lors de l'élimination de l'indentation des listes ul, ol et autres, le style doit être écrit comme suit : list-style:none;margin:0px;padding:0px;
L'attribut margin est valide pour IE et l'attribut padding est valide pour FireFox. ← Cette phrase est mal exprimée, veuillez consulter ↓ pour plus de détails
[Note] Ce problème n'a pas été réellement vérifié et sera modifié après vérification.
[Note] 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 la liste. La définition du remplissage n'a aucun effet sur le style dans Firefox ; la définition de margin:0px ne peut supprimer que les retraits 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 de liste ou les points. 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.
22. Problème de transparence CSS IE : filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF : opacité : 0,6.
[Note] Il est préférable d'écrire les deux et de mettre l'attribut d'opacité ci-dessous.
23. Problème de coins arrondis CSS IE : les versions inférieures à ie7 ne prennent pas en charge les coins arrondis.
FF : -moz-border-radius:4px, ou -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- rayon en bas à droite : 4px ;.
[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 de laisser ces problèmes complexes à d'autres.
Il y a trop de problèmes en CSS, et même la même définition CSS a des effets d'affichage différents selon les normes de page. Une suggestion qui est conforme au développement est que la page devrait être écrite en utilisant les normes DHTML standard, avec moins d'utilisation de tableaux. Les définitions CSS devraient être basées autant que possible sur le DOM standard, en tenant compte des navigateurs traditionnels tels que IE, Firefox. , et Opéra. BTW, dans de nombreux cas, les normes d'interprétation CSS de FF et Opera sont plus proches des normes CSS et plus normatives.