Explication détaillée des problèmes de compatibilité dans différents navigateurs

Le soi-disant problème de compatibilité des navigateurs fait référence à la situation dans laquelle différents navigateurs ont une analyse différente du même morceau de code, ce qui entraîne des effets d'affichage de page incohérents. Dans la plupart des cas, notre exigence est que quel que soit le navigateur utilisé par l'utilisateur pour consulter notre site Web ou se connecter à notre système, il doit y avoir un effet d'affichage unifié. Par conséquent, les problèmes de compatibilité des navigateurs sont des problèmes que les développeurs frontaux rencontrent souvent et doivent résoudre.

Avant d'en savoir plus sur la compatibilité des navigateurs, j'aimerais diviser les développeurs front-end en deux catégories :

Catégorie 1 :

Ils sont des développeurs front-end qui développent avec précision selon les dessins de conception, dont on peut dire qu'ils sont précis à 1 px. Ils peuvent facilement trouver les défauts des dessins de conception, et dans de rares cas, ils rencontreront des problèmes de compatibilité du navigateur, et ces problèmes Ils. éliminent souvent les bogues du navigateur, et les pages qu'ils produisent sont faciles à maintenir à l'avenir, et il y a peu de problèmes de réutilisation du code. On peut dire qu'il s'agit d'un code relativement stable et fiable.

La deuxième catégorie :

sont des développeurs front-end qui développent essentiellement selon les dessins de conception, de nombreux détails sont très différents, tels que l'espacement, la hauteur des lignes, la position de l'image, etc. sont souvent différents de quelques px. La réalisation d'un certain effet est également obtenue grâce à un débogage répété. La raison spécifique pour laquelle cet effet se produit est encore vague et la présentation globale est très fragile. Le moindre changement met les choses en désordre. Je ne sais pas pourquoi le code est écrit de cette façon. Ces développeurs sont souvent confrontés à des problèmes de compatibilité. Après avoir modifié ce navigateur, cela a gâché un autre navigateur. Je l'ai changé encore et encore mais je n'en avais toujours aucune idée. En fait, la plupart des problèmes de compatibilité rencontrés ne doivent pas être imputés au navigateur, mais à leur technologie elle-même.

Cet article s'adresse principalement au premier type de développeurs sérieux, nous analysons donc ici principalement les problèmes de compatibilité du point de vue des différences d'analyse des navigateurs.

Méthodes/étapes

Problème de compatibilité des navigateurs 1 : différents navigateurs ont des correctifs externes par défaut différents et des correctifs internes pour les balises

Symptômes du problème : écrivez simplement quelques balises sans contrôle de style, et leurs marges et leur remplissage respectifs seront très différents.

Fréquence des rencontres : 100 %

Solution : CSS *{margin:0;padding:0;}

Remarque : c'est la solution la plus courante et la plus simple pour résoudre un navigateur problème de compatibilité, presque tous les fichiers CSS utiliseront le caractère générique * au début pour mettre à 0 les patchs internes et externes de chaque balise.

Problème de compatibilité du navigateur 2 : une fois que la balise d'attribut de bloc flotte et qu'il y a des marges horizontales, la marge affichée dans IE6 est plus grande que la valeur définie

Symptômes du problème : peu importe Écrivez plusieurs balises, et sans contrôle de style, leurs marges et remplissage respectifs seront très différents.

Fréquence des rencontres : 100 %

Solution : CSS *{margin:0;padding:0;}

Remarque : c'est la solution la plus courante et la plus simple pour résoudre un navigateur problème de compatibilité, presque tous les fichiers CSS utiliseront le caractère générique * au début pour mettre à 0 les patchs internes et externes de chaque balise.

Problème de compatibilité du navigateur 3 : définissez une balise de hauteur plus petite (généralement inférieure à 10 px) Dans IE6, IE7, la hauteur dépasse la hauteur définie par vous

Symptômes du problème : La hauteur de cette étiquette dans IE6, 7 et Ayouli est incontrôlée et dépasse la hauteur fixée par vous-même

Fréquence de rencontre : 60%

Solution : Donner l'utilisateur qui dépasse la hauteur Définissez l'étiquette sur overflow:hidden; ou définissez la hauteur de ligne pour qu'elle soit inférieure à la hauteur que vous avez définie.

Remarque : Cette situation se produit généralement dans les étiquettes où nous définissons un petit arrière-plan aux coins arrondis. La raison de ce problème est que les navigateurs antérieurs à IE8 attribueront à l'étiquette une hauteur de ligne minimale par défaut. Même si votre étiquette est vide, la hauteur de l'étiquette atteindra toujours la hauteur de ligne par défaut.

Problème de compatibilité du navigateur 4 : balises d'attribut en ligne, la disposition flottante est utilisée après la définition de display:block, et il y a des marges horizontales, bug d'espacement IE6

Symptôme du problème : le rapport d'espacement dans IE6 dépasse l'espacement défini

Probabilité de rencontre : 20 %

Solution : Ajouter display:inline;display: after display:block table;

Remarque : balises d'attribut en ligne, afin de définir la largeur et la hauteur, nous devons définir display:block; (sauf pour la balise d'entrée, qui est spéciale). Après avoir utilisé la disposition flottante et la marge horizontale, sous IE6, il y a le bug de la marge horizontale après l'attribut de bloc float. Cependant, comme il s'agit en soi d'une balise d'attribut en ligne, si nous ajoutons display:inline, sa hauteur et sa largeur ne peuvent pas être définies. À ce stade, nous devons également ajouter display:talbe après display:inline.

Problème de compatibilité des navigateurs 5 : Les images ont un espacement par défaut

Symptômes du problème : Lorsque plusieurs balises img sont regroupées, certains navigateurs Il y aura un espacement par défaut, et l'ajout du caractère générique mentionné à la question 1 ne fonctionnera pas.

Chance de rencontre : 20 %

Solution : utilisez l'attribut float pour mettre en page img

Remarque : étant donné que la balise img est une balise d'attribut en ligne, tant qu'elle ne le fait pas dépasser la largeur du conteneur, les balises img seront toutes disposées sur une seule ligne, mais dans certains navigateurs, il y aura un espace entre les balises img. Supprimer cet espacement et utiliser float est la bonne façon. (Un de mes étudiants utilise une marge négative. Bien que cela puisse être résolu, la marge négative en elle-même est une utilisation qui peut facilement causer des problèmes de compatibilité du navigateur, j'interdis donc leur utilisation)

Problème de compatibilité du navigateur 6 : La définition de min-height pour la hauteur minimale de l'étiquette est incompatible

Symptôme du problème : Parce que min-height elle-même est une propriété CSS incompatible, donc définir min-height - la hauteur n'est pas bien compatible avec différents navigateurs

Probabilité de rencontre : 5%

Solution : Si nous voulons définir la hauteur minimale d'une étiquette à 200px, les paramètres à effectuer sont : { min-height:200px; height:auto !important; height:200px; overflow:visible;}

Remarque : lors de l'ouverture du frontal du système B/S, il existe de nombreuses situations dans lesquelles nous avons besoin de ça. Lorsque le contenu est inférieur à une valeur (telle que 300 px). La hauteur du conteneur est de 300 px ; lorsque la hauteur du contenu est supérieure à cette valeur, la hauteur du conteneur est augmentée au lieu d'afficher des barres de défilement. À ce stade, nous serons confrontés à ce problème de compatibilité.

Problème de compatibilité du navigateur 7 : Paramètres CSS compatibles pour la transparence

La méthode pour créer une page compatible est la suivante : écrire un petit morceau de code (une ligne ou un bloc dans le mise en page) à chaque fois que nous devons vérifier s'il est compatible dans différents navigateurs. Bien sûr, si vous maîtrisez un certain niveau, ce ne sera pas si gênant. Recommandé pour les novices qui rencontrent souvent des problèmes de compatibilité. De nombreux problèmes de compatibilité sont causés par l'analyse différente des attributs par défaut des balises par les navigateurs. Ces problèmes de compatibilité peuvent être facilement résolus avec quelques paramètres. Si nous connaissons les attributs par défaut des balises, nous pouvons mieux comprendre pourquoi des problèmes de compatibilité surviennent et comment les résoudre.

/* CSS hack*/

J'utilise rarement des hackers, c'est peut-être une habitude personnelle, je n'aime pas écrire du code incompatible avec IE et ensuite utiliser des hacks pour le résoudre. Mais hacker reste très simple à utiliser. En utilisant les hackers, je peux diviser les navigateurs en 3 catégories : IE6 ; IE7 et Aoyou autres (IE8 chrome ff safari opera, etc.)

◆Les hackers reconnus par IE6 sont le trait de soulignement_ et l'astérisque*

◆Le pirate informatique connu par IE7 est un astérisque*

Par exemple, il s'agit d'un paramètre CSS :

height:300px;*height:200px;_height:100px; navigation Lorsque le navigateur lit height: 300px, il pensera que la hauteur est de 300px; continuez la lecture, il connaît également *heihgt, donc lorsque IE6 lit *height: 200px, il écrasera le paramètre conflictuel du précédent et pensera que la hauteur est 200px. Continuez à lire, IE6 connaît également _height, il écrasera donc le paramètre de hauteur de 200 px et définira la hauteur à 100 px

IE7 et Aoyou liront également à partir du paramètre de hauteur de 300 px ; Ils s'arrêtent lorsqu'ils lisent *height200px parce qu'ils ne connaissent pas _height. Ils analyseront donc la hauteur à 200 px, et les navigateurs restants ne connaissent que la première hauteur : 300 px ; ils analyseront donc la hauteur à 300 px ; Étant donné que la définition de propriétés avec la même priorité et le même conflit écrasera la précédente, l'ordre d'écriture est très important.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!