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
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
sous la balise
, puis spécifier une classe pour p, puis concevoir le CSS comme ceci : #container{ min-width : 600px; width :expression(document.body.clientWidth < 600? "600px": "auto" );} La première largeur minimale est normale mais la largeur de la ligne 2 utilise Javascript, qui n'est reconnu que par IE. Cela rendra votre document HTML moins formel. Il implémente en fait la largeur minimale via le jugement Javascript.
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é}
/p>
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 : gauche">
l'arrière-plan de la page est bleu pour atteindre l'objectif d'avoir la couleur d'arrière-plan des trois colonnes bleue, mais nous constaterons que lorsque le centre gauche s'étend vers le bas, la page enregistre en fait la hauteur inchangée. Voici le problème. raison Le problème est que la page n'est pas un attribut flottant et que notre page ne peut pas être définie pour flotter car elle doit être centrée, nous devrions donc le résoudre comme ceci " style="float:left;width :100%”>
”right”>
Puis intégrez un float left et p d'une largeur de 100% pour résoudre le problème
④Fermeture flottante universelle (très important ! ) Pour le principe du clear float, veuillez vous référer à [Comment effacer les flotteurs sans balisage structurel], ajoutez le code suivant au Global CSS et ajoutez class="clearfix" au p qui doit être fermé à chaque fois. /* Clear Fix */ .clearfix:after { content:"."; display :block; clear:both; */ .clearfix {display:block;} /* Fin du masquage depuis IE Mac * / /* fin de clearfix */ Ou définissez-le comme ceci : .hackbox{ display:table; //Affiche l'objet en tant que bloc au niveau de l'élément table}
11. Non-adaptation de la hauteur La non-adaptation de la hauteur se produit lorsque l'objet intérieur La hauteur extérieure ne peut pas être automatiquement ajustée lorsque la hauteur change, en particulier lorsque l'objet intérieur utilise une marge ou un paddign. Exemple : #box { } #box p {margin-top : 20px;margin-bottom: 20px; text-align:center; }
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.
12. Pourquoi y a-t-il un espace sous l'image sous IE6 ? Il existe de nombreuses façons de résoudre ce bug. Vous pouvez modifier la mise en page du code HTML, ou définir l'image pour afficher : bloquer ou définir la verticale. aligner l'attribut sur vertical-align:top | bottom |middle |text-bottom peut être résolu
13. Comment aligner le texte et la zone de saisie de texte avec vertical-align:middle; text/css">
14 . Il existe une différence entre l'identifiant et la classe définis dans les normes Web. Quelle est la différence ? 1. La duplication des identifiants n'est pas autorisée dans les normes Web. Par exemple, pid="aa" ne peut pas être répété deux fois et la classe définit une classe. , qui peut théoriquement être répété à l'infini, donc les définitions qui nécessitent plusieurs références peuvent être utilisées. 2. La priorité des attributs est supérieure à celle de la classe. Voir l'exemple 3 ci-dessus. JS. Si vous souhaitez effectuer des opérations de script sur un objet dans la page, vous pouvez lui définir un identifiant, sinon vous ne pouvez le trouver qu'en parcourant les éléments de la page et en spécifiant des attributs spécifiques. ressources, et est beaucoup moins simple qu'un identifiant.
15. Une fois que le contenu de LI dépasse la longueur, utilisez une méthode d'affichage avec points de suspension. Cette méthode convient aux navigateurs IE et OP
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
/* intLen){ strTemp+=strContent.substr(0,intLen)+"
"; strContent=strContent.substr(intLen,strContent.length); } strTemp+="
"+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ 13.Pourquoi la largeur du conteneur sous IE6 est-elle différente de celle de FF ?
