Conseils pour résoudre la compatibilité du navigateur

Lorsque nous développons des pages Web frontales et écrivons le style CSS de la page, nous devons souvent prendre en compte les problèmes de compatibilité des différents navigateurs, afin que les pages frontales que nous concevons et développons puissent être affichées normalement sur différents navigateurs. Dans ce chapitre, nous vous apporterons quelques conseils pour résoudre la compatibilité des navigateurs, qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

1. Sous Chrome, les polices de texte inférieures à 12 px seront affichées en 12 px par défaut, permettant à Chrome de prendre en charge les polices inférieures à 12 px.

box{ font-size: 8px; -webkit-text-size-adjust: none;}

Cependant, le méthode ci-dessus chrome27 Il ne peut plus être utilisé. Mais nous pouvons utiliser CSS3 pour résoudre ce problème

box{ font-size: 12px; -webkit-transform: scale(0.75);}

2. Le patch externe par défaut et le patch interne des balises dans différents navigateurs sont différents. Écrivez simplement quelques balises sans ajouter de contrôle de style. les marges et le remplissage sont assez différents. Fréquence de rencontre : 100 %

Solution :

* {margin:0;padding:0;}

Remarque : c'est la plus courante et la plus simple à résoudre en raison de problèmes de compatibilité du serveur. , presque tous les fichiers CSS utilisent des caractères génériques au début pour définir les correctifs internes et externes de chaque étiquette sur 0.

3. Définissez une étiquette 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 : ie6, 7 et La hauteur de cette étiquette dans Aoyouli est incontrôlée et dépasse la hauteur définie par vous-même

Fréquence de rencontre : 60 %

Solution : Définir le débordement : caché pour les étiquettes qui dépassent la hauteur ; ou Définissez la hauteur de ligne sur une valeur 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.

4. Les images ont un espacement par défaut

Symptômes du problème : Lorsque plusieurs balises img sont mises ensemble, certains navigateurs ont un espacement par défaut, plus problème 1 Les jokers mentionnés cela ne fonctionne pas non plus.

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, donc Tant qu'il ne dépasse pas la largeur du conteneur, les balises img seront disposées en rangée, mais certains navigateurs auront un espace entre les balises img. Supprimer cet espacement et utiliser un flotteur est la bonne façon

5. Le réglage de la hauteur minimale de l'étiquette, min-height, est incompatible

Symptômes du problème : Parce que min-height lui-même est une incompatibilité Attributs CSS compatibles, donc la définition de min-height n'est pas bien compatible avec différents navigateurs

Chance de rencontre : 5%

Solution : Si nous voulons définir le hauteur minimale d'une étiquette 200px, les paramètres requis sont :

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

Remarque : lors de l'ouverture de l'avant du système B/S, il existe de nombreuses situations où nous avons cette exigence. 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é.

6. Problème de const

Remarque : Sous Firefox, vous pouvez utiliser le mot-clé const ou le mot-clé var pour définir des constantes

IE Ci-dessous, 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 location .href

Explication : 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.location.

Solution : utilisez window.location au lieu de window.location.href.

8. ol listes Problème d'indentation

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;

Il a été vérifié que dans IE, définissez la marge : 0px Vous pouvez supprimer les retraits en haut, en bas, à gauche et à droite, 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 la marge : 0px. Les espaces supérieurs et inférieurs. La définition de padding:0px ne peut 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.

9. Problèmes avec IE et la largeur et la hauteur

IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme Utilisez-le s'il y a une situation minimale. C'est un gros problème. Si vous utilisez uniquement la largeur et la hauteur, ces deux valeurs ne changeront pas dans un navigateur normal. Si vous utilisez uniquement min-width et min-height, la largeur et la hauteur ne sont pas du tout définies. sous IE.

Par exemple, si vous souhaitez définir une image de fond, cette largeur est plus importante. Pour résoudre ce problème, vous pouvez faire ceci :

box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

10. Largeur minimale de la page

Comme dans le problème précédent, IE ne le fait pas. reconnaître min. Pour atteindre la largeur minimale, Largeur, la méthode suivante peut être utilisée :

container{ min-width: 600px;width:expression(document.body.clientWidth＜600? "600px" : "auto" );}

La première largeur minimale est normale ; mais la largeur de la deuxième ligne utilise Javascript, qui n'est reconnu que par IE, ce qui rendra également votre document HTML moins formel. Il implémente en fait la largeur minimale via le jugement Javascript.

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!