1.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.
2. Interdire la sélection de contenu Web :
Utilisez généralement js dans IE : obj.onselectstart=function(){return false;}
Firefox utilise CSS :-moz-user-select:none
3. Support de filtre (exemple : filtre transparent) :
IE:filter:alpha(opacity=10);
firefox:-moz-opacity:.10;
4. Capturer l'événement :
IE : obj.setCapture(), obj.releaseCapture()
Firefox : document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);
5. Obtenez la position de la souris :
IE : event.clientX, event.clientY
Firefox : la fonction événementielle est requise pour transmettre l'objet événement
obj.onmousemove=fonction(ev){
X=ev.pageX;Y=ev.pageY;
>
6. Problèmes de limites du DIV et d'autres éléments :
Par exemple : définissez le CSS d'un div ::{width:100px;height:100px;border:#000000 1px solid;}
Dans IE : largeur du div (largeur de la bordure incluse) : 100 px, hauteur du div (largeur de la bordure incluse) : 100 px ;
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
;
.
1. Déterminez le type de navigateur :
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
Généralement, vous pouvez utiliser !important pour prioriser l'utilisation des instructions CSS (uniquement pris en charge par Firefox)
Par exemple : {border-width:0px!important;border-width:1px;}
Sous Firefox, cet élément n'a pas de bordure. Sous IE, la largeur de la bordure est de 1px
.
Description du problème : 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.
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 des objets de collection.
Solution : utilisez [] uniformément pour obtenir des objets de classe de collection.
Description du problème : sous IE, vous pouvez utiliser la méthode d'obtention d'attributs normaux 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().
Description du problème : Sous IE, vous pouvez utiliser eval("idName") ou getElementById("idName") pour récupérer l'objet HTML avec l'identifiant idName ; sous Firefox, vous ne pouvez utiliser que getElementById("idName") pour récupérer le Objet HTML avec l'identifiant idName .
Solution : utilisez getElementById("idName") uniformément pour obtenir l'objet HTML dont l'identifiant est idName.
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, le même nom de variable que l'ID de l'objet HTML peut être utilisé, 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é.
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.
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.
Description du problème : window.event ne peut être exécuté que sous IE, 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 :
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.
Problème 10.event.srcElement
Solution : utilisez srcObj = event.srcElement ? event.srcElement : event.target;
Si vous considérez la question 8, utilisez simplement myEvent au lieu de event.
Problème 11.window.location.href
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être modale et non modale
Solution : utilisez directement 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.Problèmes de cadre et d'iframe
(1) Accéder à l'objet cadre
IE : utilisez window.frameId ou window.frameName pour accéder à cet objet frame
Firefox : utilisez window.frameName pour accéder à cet objet frame
Solution : utilisez window.document.getElementById("frameId") uniformément pour accéder à cet objet frame
;
(2) Changer le contenu du cadre
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
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] 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. Méthode de délégation d'événement
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();
[Remarque] La différence entre fonction et fonction
16. Différences dans les éléments parents accessibles
Description du problème : 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 nœud parent d'obj.
17.cursor: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.
18.Problème de texte intérieur
Description du problème : innerText fonctionne normalement dans IE, mais innerText ne fonctionne pas dans FireFox.
Exemple :
[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'attribution de largeur et de hauteur d'objet
Description du problème : les instructions telles que obj.style.height = imgObj.height ne sont pas valides dans FireFox.
Solution : utilisez obj.style.height = imgObj.height 'px';
20. Problèmes de fonctionnement de la table
Description du problème : IE, Firefox et d'autres navigateurs ont des opérations différentes sur les balises de table. 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.
Solution :
[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 de listes telles que ul et ol, 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, voir ↓
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 liste 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 : filtre: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 : 4 px ;.
[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 convient au développement est que la page soit écrite en utilisant le standard DHTML, avec moins d'utilisation de tableaux, et que les définitions CSS soient basées autant que possible sur le DOM standard, en tenant compte des navigateurs grand public 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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
