[Paquet] est compatible avec la plupart des problèmes de compatibilité du navigateur de finition complètes et des solutions (tour)

Les problèmes courants de compatibilité des navigateurs et des solutions

Les soi-disant problèmes de compatibilité du navigateur, reportez-vous parce que les différents navigateurs ont des résolutions différentes sur le même morceau de code, ce qui dans l'affichage de la page cas, le résultat est pas uniforme. Dans la plupart des cas, nos besoins, peu importe ce que le navigateur de l'utilisateur pour consulter notre site Web ou visitez notre système devrait être affichage unifié. Ainsi, les problèmes de compatibilité navigateur sont les développeurs front-end se heurtent souvent à un problème et doit être pris en compte.

Avant d'apprendre la compatibilité du navigateur, je veux les développeurs frontaux sont divisés en deux catégories:

La première est précisément en conformité avec les développeurs front-end pour concevoir le développement peut être dit être précis à 1px, ils peuvent facilement trouver une conception inadéquate, et dans des cas rares rencontrera des problèmes de compatibilité avec les navigateurs, ces problèmes sont souvent navigateur bug morts et post-production de leurs pages faciles à entretenir, moins de problèmes de réutilisation de code, on peut dire est plus fermement le code assuré.

La deuxième catégorie est les développeurs de base frontaux pour développer conformément à la conception, un écart important entre beaucoup de petits détails, comme l'espacement, la hauteur de la ligne, l'emplacement et ainsi l'image souvent pauvres quelques px. Pour obtenir un effet de tests répétés est également disponible, en particulier pourquoi cet effet est encore vague, le plan d'ensemble est très fragile. Un petit changement dans un désordre. Pourquoi écrire le code vous encore je ne sais pas pourquoi. Ces développeurs souvent des problèmes de compatibilité souvent pris au piège. Eh bien, ce navigateur modifié et un autre navigateur chaotique. Changement au changement d'avoir aucune idée. En fait, la plupart des problèmes de compatibilité qu'ils rencontrent ne doivent pas être attribués au navigateur, mais leur technologie elle-même vers le haut.

L'article principal pour la première catégorie, le type rigoureux de développeur, voici donc la principale différence du point de vue du navigateur pour analyser les problèmes de compatibilité à résoudre.
　　-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ----

problème de compatibilité du navigateur: différents onglets du navigateur par défaut Patch interne et externe différents patchs

Les symptômes du problème: il suffit d'écrire quelques étiquettes, sans le cas du motif contrôler leur marge et le rembourrage tout à fait différente.

Fréquence atteint: 100%

Solution: Utiliser le style css reset

Note: Ceci est la plus courante et la plus facile à résoudre par un problème de compatibilité du navigateur, presque tous les fichiers CSS qui commencent par le caractère générique * sera mis en place à l'intérieur et à l'extérieur du patch chaque onglet est 0.

problème de compatibilité du navigateur: les étiquettes des attributs de bloc flottant, il y a des circonstances dans la marge rampants, les paramètres d'affichage de la marge IE6 que les grandes

Symptômes Problème: Les symptômes courants sont derrière IE6 est en haut à la ligne suivante

fréquence de rencontre: 90% (page un peu plus complexe vient à travers, la mise en page de flotteur le plus de problèmes de compatibilité du navigateur commun)

Solution: Ajouter le modèle de contrôle d'affichage de l'étiquette de float: en ligne, converti à l'attribut en ligne

Notes: Notre plus utilisé est div + mise en page CSS, alors que la div est une balise d'attribut de bloc typique, l'aménagement du paysage lorsque nous utilisons habituellement div flotteur pour atteindre, l'espacement latéral est défini si la marge réalisée, cela est inévitable rencontre des problèmes de compatibilité.

Compatibilité navigateur Question trois: définir une étiquette de hauteur inférieure (généralement inférieur à 10px), dans IE6, IE7, Voyage au-delà de leur hauteur de réglage de la hauteur

Les symptômes du problème: un degré élevé de contrôle IE6,7 et Voyage dans ce label, mis en place au-delà de leur propre la hauteur

fréquence de rencontre: 60%

Solution: onglet Paramètres pour dépasser la hauteur de overflow: hidden; régler la hauteur de la ligne, ou ligne hauteur inférieure à la hauteur que vous définissez.

NOTE: Cela se produit en arrière-plan, nous avons créé une étiquette petit filet. Ce problème se produit parce que le navigateur IE8 précédent par défaut à marquer une hauteur de hauteur de ligne minimum. Même si votre balise est vide, la hauteur de la balise sera toujours atteindre la hauteur de ligne par défaut.

Compatibilité navigateur Question 4: onglet Propriétés en ligne, définissez l'affichage: la situation après la mise en page de bloc à l'aide float, il y a marge rampante, pas de bug IE6

IE6 pas dans le rapport de pas est supérieure à l'ensemble: Symptômes du problème

Chances de toucher: 20%

Solution: display: block; afficheur LCD ajouté: inline; display: table;

REMARQUE: Les étiquettes d'attributs inline, afin de régler la largeur et la hauteur, nous avons besoin à l'affichage de jeu: block; (en plus de l'entrée étiquette spéciale). Après le flotteur avec la mise en page et la marge latérale, à IE6, il marge latérale ayant le bug après les attributs de bloc de flotteur. Mais parce qu'il est lui-même dans la balise ligne de propriété, donc nous ajoutons display: inline, il ne peut pas se trouver sur l'aspect. Cette fois-ci nous avons aussi besoin d'affichage: affichage en ajoutant derrière en ligne: talbe.

Compatibilité navigateur Question 5: L'image présente un espacement par défaut

Les symptômes du problème: balise img mis ensemble quelques fois, certains navigateurs par défaut d'espacement, plus un problème génériques mentionnés ne fonctionne pas.

Chances de toucher: 20%

Solution: Utilisez la mise en page de propriété float img

REMARQUE: balise img dans une ligne de balise d'attribut, tant que la largeur du conteneur ne dépasse pas, balise img sera classée sur une seule ligne, mais entre balise img fera partie des emplacements du navigateur. Cet espacement est utilisé pour enlever le flotteur droit chemin

problèmes de compatibilité du navigateur Six: Étiquette réglage le plus bas de la hauteur n'est pas compatible min-height

Les symptômes du problème: parce que lui-même n'est pas min-hauteur compatible avec une propriété CSS, il est pas bon d'être compatible avec différents navigateurs lors de la configuration min-height

probabilité de toucher: 5%

Solution: Si nous voulons définir une hauteur minimale de l'étiquette 200px, doivent être fournis pour: {min-height: 200px; height: auto ImPORTanT; hauteur :! 200px; overflow: visible;}

Note: Lorsque B / S systèmes ouverts frontaux, nous avons cette demande dans de nombreux cas. Lorsque la teneur est inférieure à une valeur (par exemple, 300 x). Hauteur du récipient est 300px; hauteur lorsque la teneur est supérieure à cette valeur, la hauteur du support de conteneur est élevé, au lieu de la barre de défilement. Cette fois, nous serons confrontés à ce problème de compatibilité.

problèmes de compatibilité du navigateur Seven: la transparence compatible avec CSS

Page principale compatible est: chaque écriture d'un morceau de code (ou une mise en page de suite), nous sommes tous compatibles dans les différents navigateurs vu, bien sûr, à un certain degré de compétence aucune difficulté. Recommandé pour les débutants se heurtent souvent à des problèmes de compatibilité. De nombreux problèmes de compatibilité sont différents parce que le résultat de l'analyse balise d'attribut par défaut du navigateur, aussi longtemps que nous pouvons facilement mettre en place un peu pour résoudre ces problèmes de compatibilité. Si nous connaissons la propriété par défaut de l'étiquette, alors vous pouvez bien comprendre pourquoi il y aura des problèmes de compatibilité et la façon de résoudre ces problèmes de compatibilité.

1. /* CSS hack*/ 
   

J'utilise rarement pirate informatique peut être habitudes personnelles, je ne aime pas à écrire du code qui n'est pas compatible avec IE, puis utilisez le hack pour résoudre. Cependant hacker est encore très utile. Je peux utiliser le navigateur hacker en trois catégories: IE6, IE7 et voyage, d'autres (IE8 Chrome ff opéra Safari, etc.)

◆ IE6 hacker savoir est un _ et l'astérisque *

◆ IE7 Voyage pirate savoir que * astérisque

Par exemple, un tel paramètres CSS:

height:300px;*height:200px;_height:100px;

IE6 navigateur pour lire la hauteur: 300px temps sera considéré comme à haut 300px, lisez ce qui suit, il a reconnu heihgt, alors quand lire IE6 hauteur: 200px temps ignorera les réglages avant un conflit, que la hauteur est 200px . Lisez ce qui suit, IE6 également reconnu _height, donc il va écraser les paramètres de la haute, la hauteur est réglée sur 100px;

IE7 est la même lecture et Voyage vers le bas d'une hauteur de 300px paramètres. Quand ils lisent * height200px cesseraient, parce qu'ils ne savent pas _height. Donc, ils seront résolus à la hauteur de 200px, le reste du navigateur ne reconnaît que la première hauteur: 300px; hauteur afin qu'ils résoudront à 300px. Parce que la même priorité et que vous voulez la propriété d'un conflit remplacera le précédent, de sorte que l'ordre d'écriture est très important.

Lorsque la conception de site web, il convient de noter les styles CSS compatibles avec problème différent des navigateurs, en particulier pour les filets d'utiliser pleinement la conception DIV CSS, nous devrions accorder plus d'attention à la compatibilité IE6 IE7 FF avec des styles CSS, ou votre chaos réseau sortirai ne veulent pas apparaître l'effet!

Tout navigateur
hauteur: 100px;

IE6 dédié
_height: 100px;

IE6 spéciale
hauteur de *: 100px;

IE7 dédié
* + hauteur: 100px;

IE7, FF commune
hauteur: 100px importante ;!

javascript partie

1. Problème de document.form.item

problème:

document.formName.item ( « itemName ») la présence d'une telle déclaration dans le code ne peut pas être exécuté dans le FF

solution:

改用 document.formName.elements [ « elementName »]

2. Objet de collections

problème:

Lorsque vous utilisez un certain nombre de collection code d'accès objet de classe (), IE peut accepter, FF non

solution:

Utilisez [] comme une opération de l'indice, par exemple:

document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

3. window.event

problème:

Utilisez window.event pas de travail sur FF

solution:

L'événement de FF ne peut utiliser dans les événements sur le terrain, ce problème ne peut être résolu temporairement. L'événement peut se propager fonction dans le travail autour de:

onMouseMove = "functionName(event)"
function functionName (e) {
    e = e || window.event;
    ......
}

id 4. objet HTML comme le nom de l'objet en question

problème:

Dans IE, l'ID d'objet HTML comme nom de variable d'objet subordonné peut être utilisé directement document, et non dans le FF

solution:

Tous avec l'utilisation d'une variable d'objet standard getElementById ( « idName »)

Le problème de la cible acquise par la chaîne idName

problème:

Dans IE, en utilisant eval ( « idName ») peut être obtenu que l'ID d'objet idName HTML, pas dans le FF

solution:

( "IdName") a été remplacé par getElementById eval ( "idName")

6. Le même nom variable avec un problème d'identification de l'objet HTML

problème:

Dans le FF, car l'ID d'objet est pas un nom de l'objet HTML, HTML peut être utilisé avec le même ID objet nom variable, IE ne peut pas

solution:

Lors de la déclaration des variables, ainsi que toutes les var, pour éviter toute ambiguïté, de sorte que le fonctionnement normal peut dans IE
préférable de ne pas prendre le même nom variable id objet HTML, de réduire les fausses

7. Problème event.x avec event.y

problème:

Dans IE, objet événement a x, y, propriétés FF Non

solution:

Dans le FF, et est event.x équivalent event.pageX, event.pageX IE , mais pas
si l'utilisation event.clientX event.x remplacé, dans cette variable a également IE
event.clientX présentent des différences subtiles avec event.pageX est la barre de défilement
soit exactement la même chose, il peut être:
mX = event.x event.x event.pageX :?,
puis mX au lieu de event.x

8. À propos de cadre

problème:

Le cadre peut être obtenue avec window.testFrame dans IE, FF ne sont pas

solution:

window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'

9. obtenir des propriétés des éléments

Dans FF, la propriété doit être leur propre définition de getAttribute () fait

Dans le FF 10. Pas parentElement, parement.children mais avec parentNode, parentNode.childNodes

problème:

ChildNodes sens dans différents indice IE et FF, FF inséré dans le nœud childNodes texte vide

solution:

Vous pouvez éviter ce problème en node.getElementsByTagName ()

problème:

Lorsqu'un nœud est manquant html, IE et FF parentNode interprétation différente, par exemple:

<form>
<table>
<input/>
</table>
</form>

La valeur FF Input.parentNode en forme, et est nul dans le noeud IE input.parentNode
problème:

FF noeuds il n'a pas la méthode removeNode

solution:

Il faut utiliser une méthode node.parentNode.removeChild (noeud)

11. problème const

problème:

mot-clé Const ne peut pas être utilisé dans Internet Explorer

solution:

Au lieu de var

12. corps objet

problème:

Le corps de FF existait avant l'étiquette du corps n'a pas été complètement lu dans le navigateur, IE doit exister après que le corps a été complètement lu
cela aura dans IE, le document ne se termine pas le chargement, appendChild apparaîtra sur le corps question page vide

solution:

Tous les noeuds insérés dans le corps de l'opération, après que tous les onload

13. encodage URL

problème:

Habituellement, le FF & js Unrecognized

solution:

Si vous écrivez l'url dans js écriture directe et écriture et Do

14. Questions nodeName et tagName

problème:

Dans FF, tous les nœuds sont la valeur nodeName, mais pas textNode valeur tagName dans IE, un problème avec l'utilisation de nodeName

solution:

Utilisez tagName, mais il doit détecter si elle est vide

15. Propriétés des éléments

Sous IE input.type est en lecture seule, mais peut être modifiée dans le FF

16. document.getElementsByName () et document.all [nom] Problèmes

Question:
Dans IE, getElementsByName (), document.all [nom ] ne peut pas être utilisé pour obtenir l'élément div
s'il y a d' autres éléments ne peuvent pas être prises ne sais pas (cette question est sujette à controverse, encore étudiant)

17. appelle le sous-châssis ou d'autres éléments de châssis problème

Dans IE, le procédé suivant peut être utilisé pour obtenir des valeurs pour les sous-éléments:

document.getElementById ( « frameName »). (document). elementName
window.frames [ « frameName »]. elementName

Dans FF sous la forme que vous devez changement est effectué, compatible avec IE:

window.frames [ « frameName »]. contentWindow.document.elementName
window.frames [ « frameName »]. document.elementName

18. La largeur et la hauteur du problème d'affectation d'objets

problème:

FireFox similaire obj.style.height = déclaration imgObj.height est invalide

solution:

utilisation unifiée obj.style.height = imgObj.height + "px";

19. problème innerText

problème:

innerText dans IE peut fonctionner, mais il ne fonctionne pas dans FireFox innerText

solution:

Au lieu d'utiliser textContent innerText navigateur non-IE

20. Les questions event.srcElement et event.toElement

problème:

Sous IE, même objet srcElement a des attributs, mais il n'y a pas d'attribut cible, sous Firefox, même les objets ont la propriété cible, mais pas d'attribut srcElement

solution:

var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;

21. Sélectionnez le contenu Web est interdite

problème:

FF besoin CSS interdit, IE interdit JS

solution:

IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

22. Capture d'événement

problème:

FF no SetCapture (), méthode ReleaseCapture ()

solution:

IE:
obj.setCapture(); 
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
       o.setCapture();
}else {
       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
       o.releaseCapture();
}else {
       window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}