La compatibilité du CSS avec les navigateurs est parfois un casse-tête. Peut-être que lorsque vous comprendrez les techniques et les principes, vous constaterez que ce n'est pas difficile. Nous avons collecté des méthodes de compatibilité pour IE7, 6 et Fireofx sur Internet. J'ai réglé le problème. Pour la transition vers le web2.0, veuillez essayer d'écrire du code au format xhtml, et DOCTYPE affecte le traitement CSS 1.p problème de centrage vertical vertical-align:middle; Augmentez l'espacement des lignes à la même hauteur que l'ensemble p line-height:200px; Insérez ensuite le texte et il sera centré verticalement. L'inconvénient est que le contenu doit être contrôlé pour ne pas s'enrouler sous la balise gauche"> " style="float:left;width :100%”>
2. Le problème du doublement de la marge Si p est défini sur float, la marge définie sous IE sera doublée. Il s'agit d'un bug qui existe dans ie6. La solution est d'ajouter display:inline; à ce p. Par exemple : <#p id="imfloat"> Le CSS correspondant est #IamFloat{ float:left;/*sous IE, c'est entendu. comme 10px*/ display:inline;/*Sous IE, il sera compris comme 5px*/}
3 Double distance générée par IE flottant #box{ float:left width:100px margin:0; 0 0 100px; // Dans ce cas, IE générera une distance de 200px display:inline; //Ignorer les flottants} Parlons en détail des deux éléments block et inline : La caractéristique de l'élément block est qu'il commence toujours le une nouvelle ligne, la hauteur, la largeur, la hauteur de ligne et les marges peuvent être contrôlées (éléments de bloc) ; la caractéristique des éléments Inline est qu'ils sont sur la même ligne que les autres éléments et ne peuvent pas être contrôlés (éléments en ligne ); block; //peut être simulé pour les éléments en ligne Pour les éléments de bloc display:inline; //Obtenir l'effet de disposition dans la même ligne diplay:table
4 Problèmes avec IE et la largeur et la hauteur IE ne reconnaît pas la définition de min-, mais en fait elle combine la largeur et la hauteur normales et est utilisée comme s'il y avait min. Cela devient 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 définies du tout. 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; min-width: 80px; 🎜>
5. La largeur minimale de la page min -width est une commande CSS très pratique. Elle peut spécifier que la largeur minimale de l'élément ne peut pas être inférieure à une certaine largeur, afin de garantir que la composition est toujours. correct. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Pour que cette commande fonctionne sur IE, vous pouvez placer un
6.p Le texte flottant d'IE produit un bug de 3 pixels. L'objet de gauche est flottant et le côté droit est positionné en utilisant la marge gauche du patch extérieur. Le texte dans l'objet de droite sera à 3 pixels. à partir de la gauche. #box{ float: left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //Cette phrase est la clé}
7 Problème de cache-cache .IE Lorsque l'application p est complexe et qu'il y a des liens dans chaque colonne, le problème de cache-cache se produit facilement à ce moment-là. Certains contenus ne peuvent pas être affichés. Lorsque la souris sélectionne cette zone, on constate que le contenu est bien sur la page. Solution : utilisez l'attribut line-height pour #layout ou utilisez une hauteur et une largeur fixes pour #layout. Gardez la structure de la page aussi simple que possible.
8. Fermeture p du flotteur ; flotteur clair ; hauteur adaptative
① Par exemple : <#p id="floatA" ><#p id="floatB" > ; <#p id=” NOTfloatC” >Le NOTfloatC ici ne veut pas continuer à traduire, mais veut descendre. (Les attributs de floatA et floatB ont été définis sur float:left ;) Ce code n'a aucun problème dans IE, mais le problème réside dans FF. La raison en est que NOTfloatC n'est pas une étiquette flottante et que l'étiquette flottante doit être fermée. Ajoutez < #p class="clear"> entre <#p class="floatB"> <#p class="NOTfloatC">. doit être cohérent avec les deux. Il ne peut pas y avoir de relation imbriquée entre p frères et sœurs avec des attributs float, sinon une exception se produira. Et définissez le style clair comme suit : .clear{ clear:both;}
② En tant que wrapper externe, ne définissez pas la hauteur de p. Afin de permettre à la hauteur de s'adapter automatiquement, ajoutez-la au fichier. wrapper. Allez dans overflow:hidden; Lorsqu'une boîte contenant float est incluse, l'adaptation automatique de la hauteur n'est pas valide sous IE. À ce moment, l'attribut privé de mise en page d'IE doit être déclenché (le maléfique IE !) Vous pouvez utiliser zoom:1. ; pour y parvenir. Par exemple, un wrapper est défini comme suit : .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③Pour la composition, la description CSS que nous utilisons le plus est probablement float:left. Parfois, nous devons créer un arrière-plan unifié derrière le float p dans la colonne n, par exemple :
pContenu dans l'objet<
Solution : Ajoutez 2 codes CSS d'objet p vides au-dessus et en dessous de l'objet P : .1{height:0px;overflow:hidden;} ou ajoutez l'attribut border à p.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
