Analyse des points clés de compatibilité CSS_Experience Exchange

IE vs FF

Points de compatibilité CSS :

DOCTYPE affecte le traitement CSS

FF : div est déjà centré lorsque margin-left et margin-right sont définis sur auto, mais IE ne fonctionne pas

FF : lors de la définition de l'alignement du texte sur le corps, le div doit définir margin: auto (principalement margin-left, margin-right) pour être centré

FF : Après en définissant le remplissage, le div augmentera la hauteur et la largeur, mais IE ne le sait pas, vous devez donc utiliser !important pour définir une hauteur et une largeur supplémentaires

FF : prend en charge !important, mais IE l'ignore, vous peut utiliser !important pour définir le style de

div spécialement pour FF Problème de centrage vertical : vertical-align:middle; Augmentez l'espacement des lignes à la même hauteur que l'ensemble de la ligne DIV:200px Puis insérez du texte; et il sera centré verticalement. L'inconvénient est que vous devez contrôler le contenu sans envelopper

curseur : le pointeur peut afficher la forme du doigt du curseur dans IE FF en même temps, la main ne peut être utilisée que dans IE

FF : Les liens ajoutent des bordures et des couleurs d'arrière-plan, vous devez définir display: block et définir float: left pour garantir l'absence de sauts de ligne. En ce qui concerne la barre de menus, définir la hauteur d'une barre de menus permet d'éviter la dislocation de l'affichage du bord inférieur. Si la hauteur n'est pas définie, vous pouvez insérer un espace dans la barre de menus. Petite collection de solutions de compatibilité XHTML+CSS

Ici. Il y a de nombreux avantages à utiliser l'architecture XHTML+CSS, mais il y a effectivement certains problèmes, que ce soit en raison d'une utilisation peu compétente ou d'une réflexion peu claire, j'écrirai certains des problèmes que j'ai rencontrés ci-dessous pour éviter à tout le monde de regarder autour de vous ^^

1. Dans Mozilla L'interprétation incohérente du modèle BOX dans Firefox et IE entraîne une différence de 2 pixels Solution :
Notez que l'ordre de ces deux marges ne doit pas être écrit. Au contraire, selon Ajie, l'attribut !important n'est pas reconnu par IE, mais les autres navigateurs le peuvent. Donc il est en fait interprété comme ceci sous IE :

div{maring:30px;margin:28px}

Si vous répétez la définition, elle sera exécutée selon la dernière, donc vous ne peut pas simplement écrire margin:XXpx!important ;

2. L'interprétation BOX de IE5 et IE6 est incohérente. La largeur de div{width:300px;margin:0 10px 0 10px;}sous IE5 sera interprétée comme. 300px-10px (remplissage droit)-10px (remplissage gauche) La largeur finale du div est de 280 px, et sur IE6 et d'autres navigateurs, la largeur est calculée comme 300 px + 10 px (remplissage droit) + 10 px (remplissage gauche) = 320 px. Pour le moment, nous pouvons apporter les modifications suivantes

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

, à propos de ça/**/ Je ne comprends pas très bien ce que c'est, je sais seulement que IE5 et Firefox prennent en charge. mais IE6 ne le fait pas. Si quelqu'un comprend, faites-le moi savoir, merci ! :)

La balise 3.ul a une valeur de remplissage par défaut dans Mozilla, mais dans IE, seule la marge a une valeur, alors définissez

ul{margin:0;padding:0;} en premier

peut résoudre la plupart des problèmes

4. Concernant les scripts, l'attribut de langue n'est pas pris en charge dans xhtml1.1. Il vous suffit de changer le code en



.