L'utilisation du framework XHTML+CSS présente de nombreux avantages, mais il existe effectivement certains problèmes, que ce soit en raison de l'inexpérience ou d'une réflexion peu claire, je vais d'abord écrire ci-dessous certains des problèmes que j'ai rencontrés pour éviter à tout le monde de chercher.
1. L'interprétation du modèle BOX dans Mozilla Firefox et IE est incohérente, ce qui entraîne une différence de 2 pixels Solution :
div{margin:30px!important;margin:28px;}
Notez que l'ordre de ces deux marges ne doit pas être écrit à l'envers, selon Ajie ! L'attribut important n'est pas reconnu par IE, mais d'autres navigateurs le peuvent. Par conséquent, il est en fait interprété comme ceci sous IE :
Sidiv{maring:30px;margin:28px}
est défini à plusieurs reprises,
le dernier sera exécuté, vous ne pouvez donc pas simplement écrire margin:XXpx!important;
IE5 et IE6 sont incohérents sous IE5. div{width:300px;margin:0 10px 0 10px;}La largeur du div sera interprétée comme 300px-10px (remplissage à droite) -10px (remplissage à gauche). div est de 280 px, tandis que la largeur sur IE6 et autres navigateurs est calculée comme suit : 300 px + 10 px (remplissage à droite) + 10 px (remplissage à gauche) = 320 px. A ce stade, nous pouvons apporter les modifications suivantes :
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
Je ne comprends pas très bien ce qu'est ce /**/, je sais seulement IE5 et Firefox Les deux sont pris en charge mais IE6 ne le prend pas en charge. Si quelqu'un le comprend, faites-le moi savoir. Merci ! :)
3. La balise ul a une valeur de remplissage par défaut dans Mozilla, mais dans IE seule margin a une valeur, donc la définir en premier :
ul{margin:0;padding:0;}
peut résoudre la plupart des problèmes.
4. Concernant les scripts, l'attribut language n'est pas supporté dans xhtml1.1. Il vous suffit de changer le code en :
C'est tout.
5. Si vous définissez les directions de float et text-align dans le conteneur BOX pour qu'elles soient identiques :
{float:left;text-align:left;margin:0 0 0 200px;}
nous pouvons apporter les modifications suivantes :
{float :gauche; texte-align:gauche;marge:0 0 0 200px;affichage:inline;}