Résoudre le problème de l'incompatibilité CSS dans les navigateurs

Tout le monde doit détester l'incompatibilité des navigateurs. Souvent, nous nous contentons de la corriger, mais oublions la chose la plus importante, qui est de rechercher la cause première et d'éviter que des incompatibilités similaires ne se reproduisent.

Je voudrais résumer quelques éléments de codage HTML, en espérant vous donner quelques indications :
1. La taille du texte lui-même est incompatible. Le même texte de style chanson avec font-size : 14px occupe un espace différent dans différents navigateurs. Sous IE, il occupe en réalité 16 px en hauteur et 3 px dans la marge inférieure. Dans FF, il occupe en réalité 17 px en hauteur, 1 px en haut et 1 px en haut. 1px en bas. Blanc 3px, ce sera encore différent sous Opera. Solution : définissez la hauteur de ligne du texte. Assurez-vous que tout le texte a une valeur de hauteur de ligne par défaut. C'est important, nous ne pouvons pas tolérer une différence de hauteur de 1 px.

2. La hauteur du conteneur est limitée sous ff. Autrement dit, une fois que le conteneur a défini la hauteur, la forme de la bordure du conteneur est déterminée et ne sera pas agrandie par le contenu. sera étendu par le contenu et la limite de hauteur sera invalide. Ne définissez donc pas facilement la hauteur du conteneur.

3. A également discuté du problème de la rupture du contenu du conteneur, horizontalement. Si le conteneur float n'a pas de largeur définie, le contenu sous ff étirera autant que possible la largeur du conteneur, et sous ie, la priorité sera donnée à l'habillage du contenu. Par conséquent, les conteneurs flottants dont le contenu peut éclater doivent définir une largeur.

Petite expérience : Si vous êtes intéressé, vous pouvez jeter un œil à cette expérience. Testez chacun des codes suivants dans différents navigateurs.


a.

b.

c.

d.

, les petites valeurs de hauteur doivent être utilisées avec overflow:hidden. L'expérience est juste pour le plaisir. Ce que je tiens à souligner, c'est que les navigateurs ont des interprétations très différentes des limites des conteneurs et que l'impact du contenu des conteneurs varie.

4. Effacement des flotteurs Il n'est pas possible d'effacer les flotteurs sous ff.

Pour corriger l'incompréhension de tout le monde, il est faux de dire que ff est mauvais lorsqu'on rencontre une incompatibilité. En fait, c'est le plus souvent le comportement étrange de ie qui nous laisse perplexes. Ce qui suit répertorie les différents méfaits de ie6.

5. Le bug à double marge le plus détesté. Définissez margin-left ou margin-right pour un conteneur flottant sous IE6. L'effet réel est le double de la valeur. La solution consiste à définir display:inline pour le conteneur flottant.

6.mirrormargin bug, lorsqu'il y a un élément float dans l'élément externe, si l'élément externe définit margin-top:14px, margin-bottom:14px sera automatiquement généré. Des problèmes similaires se produiront également dans le padding, qui sont toutes des spécialités sous IE6. Les situations dans lesquelles ce type de bug se produit sont bien plus que ce type de condition d'occurrence, et elles n'ont pas été systématiquement résolues. Solution : définissez une bordure ou un flotteur sur l'élément extérieur.

Extension : Les explications de margin-bottom et padding-bottom des conteneurs sous ff et ie sont parfois incohérentes, ce qui semble être lié à cela.

7. En raison du manque de place, je ne m'étendrai pas sur le phénomène de déglutition. C'est toujours IE6, il y a deux p de haut en bas. Le p supérieur définit le fond, mais on constate que le p inférieur qui n'a pas de fond a aussi un fond. Correspondant au phénomène de déglutition du fond ci-dessus, il existe également le phénomène de bordures manquantes sous le défilement. Solution : utilisez le zoom : 1. Ce zoom semble être spécialement conçu pour résoudre les bugs d'IE6.

8. Les commentaires peuvent également provoquer des bugs ~~~ "Un cochon supplémentaire." C'est la copie utilisée par les personnes précédentes pour résumer ce bug dans IE6, tout le monde verra le mot cochon sur la page. . Apparaît deux fois, la quantité de contenu répété varie en fonction du nombre de commentaires. Solution : utilisez la méthode " picRotate start " pour rédiger des commentaires.

9.

Riga float

, il s'agit d'un problème de compatibilité typique et difficile. J'espère que tout le monde y prêtera attention. Différents attributs de li auront des effets d'interprétation différents. . , l'explication sous ff est légèrement compréhensible, mais l'explication sous ie6 vous rendra confus. En raison de la complexité du problème, un article séparé sera consacré à la discussion de cette question. Il y a des résultats pertinents dans l'article « expérience d'utilisation d'ul », mais le processus de résolution du problème n'est pas indiqué.

10. Le comportement étrange de ul utilisant "float:left;display:inline". On peut voir que ce CSS est ajouté à display:inline en réponse au bug de double marge sous ie6. C'est également une partie importante de mon système CSS. Cela est expliqué dans l'article "Utilisation de l'expérience ul". Et ce CSS vous rendra malheureux lorsqu'il sera utilisé sur ul. C'est tout pour l'instant, je ne peux pas en dire beaucoup plus ici.

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!