Le sujet dont nous discutons est la mise en page des pages Web CSS. Le problème le plus gênant pour tout le monde est la compatibilité des navigateurs. Bien que 52CSS.com ait introduit de nombreuses connaissances dans ce sens, cela rend encore de nombreux développeurs confus. -trois différences entre JavaScript et JavaScript dans IE et Firefox. J'espère que cela sera utile à l'apprentissage de chacun.
1. problème 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 que document.formName.elements["elementName"] ; .
Solution : utilisez document.formName.elements["elementName"] uniformément.
2. Problèmes avec les objets de collection <br /> 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.
3. Problème d'attributs personnalisés <br /> 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 que getAttribute() ) pour les obtenir. Propriétés personnalisées.
Solution : Obtenez uniformément des attributs personnalisés via getAttribute().
4. Problème eval("idName") <br /> 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 pouvez ; utilisez uniquement getElementById ("idName") pour obtenir l'objet HTML avec l'identifiant idName.
Solution : utilisez getElementById("idName") uniformément pour obtenir l'objet HTML dont l'identifiant est idName.
5. Le problème que le nom de la variable est le même que l'ID d'un objet HTML <br /> 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, il peut être utilisé avec l'objet HTML. Les noms de variables avec le même ID ne peuvent pas être utilisés 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. Problème Const <br /> 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.
7. Problème avec l'attribut input.type <br /> 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 <br /> 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:
Exemple de code source [www.downcodes.com] <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)
...
}
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 <br /> Description du problème : Sous IE, l'objet pair a l'attribut srcElement, mais pas d'attribut cible ; sous Firefox, l'objet pair a l'attribut cible, mais pas d'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 <br /> 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 ; emplacement .
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 <br /> Description du problème : Sous IE, les fenêtres modales et non modales peuvent être ouvertes via showModalDialog et showModelessDialog sous Firefox, cela ne peut pas être fait.
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 frame et d'iframe <br /> Prenons le frame suivant comme exemple :
<frame src="http://www.downcodes.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 = "52css.com.html" ou window.frameName.location = "52css.com.html" dans IE et Firefox . Le contenu du cadre ;
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 <br /> 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 être chargé 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. 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( );
Solution : utilisez document.body.onload=new Function('inject()'); ou document.body.onload = function(){/* Voici le code */}
[Remarque] La différence entre fonction et fonction
16. Différences dans les éléments parents accédés <br /> 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.
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:
Exemple de code source [www.downcodes.com] if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "mon texte";
} autre{
document.getElementById('element').textContent = "mon texte";
}
19. Problème d'affectation 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.
Solution : utilisez obj.style.height = imgObj.height + 'px' de manière uniforme.
20. Problèmes de fonctionnement des tables <br /> Description du problème : IE, Firefox et d'autres navigateurs ont des opérations différentes sur la balise table. Dans IE, l'affectation innerHTML de table et tr n'est pas autorisée lors de l'utilisation de js pour ajouter un tr. la méthode appendChild ne fonctionne pas non plus.
Solution:
Exemple de code source [www.downcodes.com] //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);
21. 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 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. Pour plus de connaissances, veuillez vous référer à l'article sur 52CSS.com. Une suggestion qui va dans le sens du développement est que la page soit écrite en utilisant le standard DHTML, avec moins d'utilisation de tableaux. La définition CSS doit être basée autant que possible sur le standard DOM, 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. 