1.FireFox ne peut pas prendre en charge InnerText.
Firefox prend en charge InnerHTML mais ne prend pas en charge InnerText. Il prend en charge TextContent pour implémenter InnerText, mais les espaces inutiles sont également conservés par défaut. Si vous n'utilisez pas TextContent, si la chaîne ne contient pas de code HTML, vous pouvez également utiliser InnerHTML à la place.
2. Il est interdit de sélectionner le contenu de la page Web:
Dans IE, JS est généralement utilisé: obj.onselectStart = function () {return false;}
Firefox utilise CSS: -Moz-User-Select: Aucun
3. Prise en charge du filtre (exemple: filtre transparent):
C'est-à-dire: filtre: alpha (opacité = 10);
Firefox: -moz-opacité: .10;
4. Capture Events:
C'est-à-dire: 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 de l'événement doit passer l'objet de l'événement
obj.onmousemove = fonction (ev) {
X = ev.pagex; y = ev.pagey;
}
6. Problèmes limites d'éléments tels que div:
Par exemple: Définissez un CSS d'un div :: {largeur: 100px; hauteur: 100px; bordure: # 000000 1px solide;}
Dans IE: La largeur de la div (y compris la largeur de bordure): 100px, la hauteur du div (y compris la largeur de la bordure): 100px;
Et Firefox: la largeur de la div (y compris la largeur de bordure): 102px, la hauteur du div (y compris la largeur de bordure): 102px;
Donc, lorsque vous faites cette fenêtre de traînée compatible avec IE et Firefox, vous devez utiliser votre cerveau pour écrire JS et CSS, et vous donner deux conseils
1. Déterminez le type de navigateur:
var isie = document. tout? vrai: false;
J'ai écrit une variable, si le document. Toute la syntaxe est prise en charge alors ISIE = Vrai, sinon Isie = False
2. Traitement CSS dans différents navigateurs:
Généralement, vous pouvez utiliser! Important pour hiérarchiser les déclarations CSS (soutenues uniquement par Firefox)
Par exemple: {Border-Width: 0px! IMPORTANT; Border-width: 1px;}
Sous Firefox, cet élément n'a pas de bordure, et sous IE, la largeur de la frontière est de 1px
1.Document.formName.item ("itemname") Problème
Description du problème: dans IE, vous pouvez utiliser document.formName.item ("itemname") ou document.formname.elements ["elementName"]; Dans Firefox, vous ne pouvez utiliser Document.formName.Elements ["ElementName"].
Solution: utilisez Document.formName.Elements ["ElementName"] de manière unifiée.
2. Problème d'objet de collecte
Description du problème: dans IE, vous pouvez utiliser () ou [] pour obtenir l'objet de classe de collection; Dans Firefox, vous ne pouvez utiliser [] que pour obtenir l'objet de classe de collecte.
Solution: utilisez [] pour obtenir des objets de classe de collecte de manière unifiée.
3. Problèmes d'attribut personnalisés
Description du problème: dans 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; Dans 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") Problème
Description du problème: dans IE, vous pouvez utiliser EVAL ("idName") ou getElementById ("idName") pour obtenir un objet HTML avec idName; Dans Firefox, vous ne pouvez utiliser GetElementById ("idName") que pour obtenir un objet HTML avec IDNAME.
Solution: utilisez GetElementById ("idName") pour obtenir l'objet HTML avec ID comme idName.
5. Problème avec le même nom de variable que l'ID d'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 dans Firefox; Sous Firefox, le nom de variable qui est le même que l'ID d'objet HTML peut être utilisé, mais pas dans IE.
Solution: utilisez document.getElementById ("idname") au lieu de document.idname. Il est préférable de ne pas prendre de noms de variables avec le même ID d'objet HTML pour réduire les erreurs; Lorsque vous déclarez les variables, ajoutez le mot-clé VAR pour éviter l'ambiguïté.
6.CONST PROBLÈME
Description du problème: Dans Firefox, vous pouvez utiliser le mot clé const ou le mot clé var pour définir les constantes; Dans IE, vous ne pouvez utiliser que le mot clé VAR pour définir les constantes.
Solution: utilisez le mot clé VAR pour définir uniformément les constantes.
7. Problème d'attribut d'entrée.
Description du problème: la propriété Input.Type sous IE est en lecture seule; mais la propriété d'entrée. sous Firefox est en lecture-écriture.
Solution: ne modifiez pas la propriété d'entrée. 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 dans la même position.
8.Window.Event Problème
Description du problème: Window.Event ne peut fonctionner que sous IE, pas dans Firefox, car l'événement Firefox ne peut être utilisé que sur la scène où l'événement se produit.
Solution: ajoutez des paramètres de l'événement à la fonction où se produit l'événement, et utilisez var myevent = evt? Evt: (window.event? Window.event: null)
Exemple:
La copie de code est la suivante:
<entrée type = "bouton" onClick = "DoSomething (événement)" />
<script linguisse = "javascript">
fonction dosomething (evt) {
var myevent = evt? evt: (window.event? window.event: null)
...
}
9. Event.x et Event.y Problèmes
Description du problème: Sous IE, l'objet uniforme a des attributs x et y, mais pas d'attributs Pagex et Pagey; Sous Firefox, l'objet uniforme a des 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.y: event.pagey;
Si vous considérez le 8ème numéro, utilisez simplement MyEvent au lieu de l'événement.
10.Event.Srcelement Problème
Description du problème: Sous IE, l'objet uniforme a une propriété Srcelement, mais pas de propriété cible; Sous Firefox, l'objet uniforme a une propriété cible, mais pas de propriété Srcelement.
Solution: utilisez srCobj = event.srcelement? event.srcelement: event.target;
Si vous considérez le 8ème numéro, utilisez simplement MyEvent au lieu de l'événement.
11.window.location.href Problème
Description du problème: dans IE ou Firefox2.0.x, vous pouvez utiliser Window.Location ou Window.Location.href; Dans Firefox1.5.x, vous ne pouvez utiliser que Window.Location.
Solution: utilisez Window.Location au lieu de Window.Location.href. Bien sûr, vous pouvez également envisager d'utiliser la méthode Location.replace ().
12. Problèmes de fenêtre modaux et non modaux
Description du problème: Sous IE, les fenêtres modales et non modales peuvent être ouvertes via ShowModaldialog et ShowModelessDialog; Sous Firefox, il ne peut pas.
Solution: utilisez Window.Open (pageurl, nom, paramètres) pour ouvrir une nouvelle fenêtre.
Si vous avez besoin de transmettre des paramètres dans la fenêtre enfant vers la fenêtre parent, vous pouvez utiliser Window.pener dans la fenêtre enfant pour accéder à la fenêtre parent. Si la fenêtre parent doit contrôler la fenêtre enfant, utilisez var subwindow = window.open (pageurl, nom, paramètres); Pour obtenir l'objet de fenêtre nouvellement ouvert.
13.
La trame suivante est un exemple:
<frame src = "xxx.html" id = "frameid" name = "FrameName" />
(1) Objet de trame d'accès
IE: Utilisez Window.FrameId ou Window.framename pour accéder à cet objet de trame;
Firefox: utilisez Window.framename pour accéder à cet objet de cadre;
Solution: utilisez Window.Document.getElementById ("frameId") pour accéder à cet objet de trame;
(2) Commutation de contenu de la trame
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;
Si vous avez besoin de transmettre des paramètres dans le 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 corporel
Description du problème: L'objet corporel de Firefox existe avant que la balise corporelle ne soit entièrement lue par le navigateur; tandis que l'objet corporel d'IE doit exister après que la balise corporelle est complètement lue par le navigateur.
[Remarque] Ce problème n'a pas encore été vérifié et sera modifié après vérification.
[Remarque] Il a été prouvé que les problèmes ci-dessus n'existent pas dans IE6, Opera9 et Firefox2. Un script JS simple peut accéder à tous les objets et éléments qui ont été chargés avant le script, même si cet élément n'a pas encore été chargé.
15. Méthode du délégué de l'événement
Description du problème: dans IE, utilisez document.body.onload = inject; où la fonction inject () a été implémentée avant cela; Dans Firefox, utilisez document.body.onload = inject ();
Solution: utilisez document.body.onload = new function ('inject ()'); ou document.body.onload = function () {/ * voici le code * /}
[Remarque] La différence entre la fonction et la fonction
16. Différences entre les éléments parents accessibles
Description du problème: sous IE, utilisez obj.parerentelement 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.
Solution: Parce que Firefox et IE prennent en charge DOM, OBJ.parentNode est utilisé 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 indicateurs en forme de main.
Solution: utilisez le pointeur de manière unifiée.
18. Le problème avec InnerText.
Description du problème: InnerText fonctionne correctement dans IE, mais InnerText ne fonctionne pas dans Firefox.
Solution: utilisez TextContent au lieu de InnerText dans des navigateurs non IE.
Exemple:
La copie de code est la suivante:
if (navigator.appname.indexof ("explorateur")> -1) {
document.getElementById ('élément'). innerText = "Mon texte";
} autre{
document.getElementById ('élément'). textContent = "mon texte";
}
[Remarque] InnerHTML est soutenu par des navigateurs tels que IE et Firefox. D'autres, comme OUTERHTML, ne sont pris en charge que par IE, il est donc préférable de ne pas l'utiliser.
19. Problème d'attribution de la largeur de l'objet et de la hauteur
Description du problème: L'énoncé similaire à obj.style.height = imgobj.height dans firefox n'est pas valide.
Solution: utilisez obj.style.height = imgobj.height + 'px' en uniforme;
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, il n'est pas autorisé à attribuer des valeurs innerHTML à la table et à TR. Lorsque vous utilisez JS, l'utilisation de la méthode APPENDCHILD ne fonctionne pas.
Solution:
La copie de code est la suivante:
// Ajouter une ligne vide à la table:
var row = otable.insertrow (-1);
var cell = document.CreateElement ("TD");
Cell.innerhtml = "";
Cell.classname = "xxxx";
Row.ApendChild (cellule);
[Remarque] Puisque j'utilise rarement JS pour utiliser directement les tables, je n'ai jamais rencontré ce problème. Il est recommandé d'utiliser des ensembles de framework JS pour manipuler des tables, telles que jQuery.
21. Issue de l'indentation UL et OL List
Lors de l'élimination de l'indentation de listes telles que UL, OL, etc., le style doit être écrit comme: Style de liste: Aucun; marge: 0px; rembourrage: 0px;
L'attribut de marge est valide pour IE et l'attribut de rembourrage est valide pour Firefox. ← Cette phrase est incorrecte, voir pour plus de détails ↓
[Remarque] Ce problème n'a pas encore été vérifié et sera modifié après vérification.
[Remarque] Il a été prouvé que dans IE, le réglage de la marge: 0px peut supprimer les indents à gauche et à droite, les blancs, les numéros de liste ou les points de la liste, et le réglage du rembourrage n'a aucun effet sur le style; Dans Firefox, le réglage de la marge: 0px ne peut supprimer l'espace blanc de haut en bas, et après le réglage du rembourrage: 0px ne peut supprimer que les retraits gauche et droit, et vous devez également définir le style de liste: aucun pour supprimer le numéro de liste ou les points. En d'autres termes, dans IE, vous pouvez réaliser l'effet final en définissant simplement la marge: 0px, padding: 0px et list-style: aucun ne doit être réglé en même temps dans Firefox pour réaliser l'effet final.
22. Problème de transparence du CSS
IE: Filtre: PROGID: DxiageTransform.microsoft.alpha (style = 0, opacité = 60).
FF: Opacité: 0,6.
[Remarque] Il est préférable d'écrire les deux et de mettre l'attribut d'opacité ci-dessous.
23. Problème d'angle arrondi CSS
IE: Les versions suivantes de IE7 ne prennent pas en charge les coins arrondis.
FF: -moz-frontière-radius: 4px, ou -moz-border-radius-topleft: 4px; -Moz-Border-Radius-Topright: 4px; -Moz-Border-Radius-Bottomleft: 4px; -Moz-Border-Radius-Bottomright: 4px;.
[Remarque] Le problème du coin arrondi est un problème classique dans CSS. Il est recommandé d'utiliser l'ensemble du cadre JQuery pour définir les coins arrondis pour laisser ces problèmes complexes aux autres.
Il y a trop de questions sur CSS, et même les mêmes définitions CSS ont des effets d'affichage différents dans différentes normes de page. Une suggestion appropriée est que la page est écrite dans la norme DHTML standard et que l'utilisation de tables est rarement utilisée. La définition du CSS doit être basée autant que possible sur le DOM standard, et les navigateurs traditionnels tels que IE, Firefox et Opera sont également pris en compte. BTW, dans de nombreux cas, les normes d'interprétation CSS de FF et Opera sont plus proches des normes CSS et sont plus standardisées.