Conseils courants sur la compatibilité CSS
Veuillez essayer d'écrire du code au format xhtml, et DOCTYPE affecte le traitement CSS. En tant que norme W3C, une instruction DOCTYPE doit être ajoutée.
1.Problème de centrage vertical de div
vertical-align:middle; Augmentez l'espacement des lignes à la même hauteur que l'ensemble du DIV line-height:200px; Insérez ensuite le texte et il sera centré verticalement. L'inconvénient est que vous devez contrôler le contenu et ne pas l'envelopper dans une autre ligne.
2. Le problème du doublement de la marge
La marge définie pour un div défini sur float sera doublée sous IE. Il s'agit d'un bug qui existe dans ie6. La solution est d'ajouter display:inline; à l'intérieur de ce div.
Par exemple:
<#div id="imfloat">
Le CSS correspondant est #imfloat{
flotteur : gauche ;
margin:5px;/*Sous IE, cela signifie 10px*/
display:inline;/*Sous IE, il sera compris comme 5px*/}
3. Double distance générée par le flottement, c'est-à-dire
#box{ float:left; width:100px; margin:0 0 0 100px; //Dans ce cas, IE générera une distance de 200px display:inline;
Parlons en détail des deux éléments block et inline : la caractéristique de l'élément block est qu'il commence toujours sur une nouvelle ligne, et la hauteur, la largeur, la hauteur de la ligne et les marges peuvent toutes être contrôlées (élément block la caractéristique) ; de l'élément en ligne est celui-là, et les autres éléments sont sur la même ligne et ne peuvent pas être contrôlés (éléments en ligne) ;
#box{ display:block; //Vous pouvez simuler des éléments en ligne en tant qu'éléments de bloc display:inline; //Obtenir l'effet d'une disposition dans la même ligne diplay:table;
4 problèmes IE avec la largeur et la hauteur
IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme s'il existait un min. C'est 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{ largeur : 80 px ; hauteur : 35 px ;}html>corps #box{ largeur : auto ; hauteur : auto ; largeur minimale : 80 px ; hauteur min : 35 px ;}
5. Largeur minimale de la page
min-width est une commande CSS très pratique. Elle peut spécifier que la largeur minimale d'un élément ne peut pas être inférieure à une certaine largeur, afin que la disposition soit toujours correcte. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Afin de rendre cette commande également disponible sur IE, vous pouvez placer un
#container{ min-width : 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}
La première largeur minimale est normale ; mais la largeur de la deuxième ligne utilise du javascript, qui n'est reconnu que par IE, ce qui rendra également votre document HTML moins formel. Il implémente en fait la largeur minimale via le jugement Javascript.
6. Le texte IE flottant DIV produit un bug de 3 pixels
L'objet de gauche flotte et celui de droite est positionné en utilisant la marge gauche du patch extérieur. Le texte à l'intérieur de l'objet de droite sera espacé de 3 pixels par rapport à la gauche.
#box{ float:gauche; largeur:800px;}
#gauche{ float:gauche; largeur:50%;}
#droit{largeur:50%;}
*html #left{ margin-right:-3px; //Cette phrase est la clé}
Lorsque l'application div est complexe, il y a des liens dans chaque colonne et des problèmes de cache-cache peuvent facilement survenir dans les DIV.
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. La division flottante est fermée ; hauteur flottante claire ;
①Par exemple : <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >Le NOTfloatC ici ne veut pas continuer à traduire, mais veut être disposé vers le bas. (Les propriétés de floatA et floatB ont été définies sur float:left;)
Ce code fonctionne bien dans IE, le problème vient de FF. La raison en est que NOTfloatC n'est pas une étiquette flottante et que l'étiquette flottante doit être fermée. Ajoutez <#div class="clear"> entre <#div class="floatB"> <#div class="NOTfloatC"> Ce div doit faire attention à sa position, et il doit être le même que les deux div avec. attributs float. Il ne peut pas y avoir de relation imbriquée entre les niveaux, sinon une exception se produira. Et définissez le style clair comme suit : .clear{ clear:both;}
② Ne définissez pas la hauteur du div comme wrapper externe. Afin de permettre à la hauteur de s'adapter automatiquement, ajoutez overflow:hidden dans le wrapper ; lorsqu'il contient une boîte flottante, l'adaptation automatique de la hauteur n'est pas valide sous IE. temps, IE doit être déclenché. L'attribut privé de mise en page (le maléfique IE !) peut être effectué en utilisant zoom:1 ;, obtenant ainsi la compatibilité.
Par exemple, un wrapper est défini comme suit :
.colwrapper{ débordement : caché ; zoom : 1 ; marge : 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 div float dans la colonne n, par exemple :
Par exemple, nous souhaitons définir l'arrière-plan de la page sur bleu afin que la couleur d'arrière-plan des trois colonnes soit bleue. Cependant, nous constaterons que lorsque le centre gauche s'étend vers le bas, la page conserve en fait la même hauteur. La raison est que la page n'est pas un attribut float 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.
La solution est d'intégrer un float left DIV d'une largeur de 100%.
④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 div qui doit être fermé à chaque fois.
/* Supprimer le correctif */
.clearfix:after { content:"."; display:block height:0;
.clearfix { display: bloc-en-ligne }
/* Masquer depuis IE Mac */
.clearfix {affichage: bloc;}
/* Fin du masquage depuis IE Mac */
/* fin du clearfix */
Ou définissez-le comme ceci : .hackbox{ display:table; //Affiche l'objet sous forme de table au niveau de l'élément de bloc}
9. La hauteur ne peut pas être ajustée
La hauteur non adaptative signifie que la hauteur externe ne peut pas s'ajuster automatiquement lorsque la hauteur de l'objet interne change, en particulier lorsque l'objet interne utilise margin ou paddign.
exemple:
#box {couleur de fond :#eee ;
#box p {marge-haut : 20px ; marge-bas : 20px ;
Contenu de l'objet p
Solution : ajoutez deux objets div vides au-dessus et en dessous de l'objet P : .1{height:0px;overflow:hidden;} ou ajoutez l'attribut border au DIV.
10.Pourquoi y a-t-il des espaces sous les images sous IE6 ?
Il existe de nombreuses techniques pour résoudre ce BUG. Vous pouvez modifier la présentation du code HTML, ou définir l'img sur display:block ou définir l'attribut vertical-align sur vertical-align:top.
le texte en bas, au milieu et en bas peut tous être résolus.
11. Comment aligner le texte avec la zone de saisie de texte
Ajoutez vertical-align:middle;
12.Y a-t-il une différence entre l'identifiant et la classe définis dans les standards du Web ?
(1). Les standards Web n'autorisent pas les identifiants répétés. Par exemple, div id="aa" ne peut pas être répété deux fois, et la classe définit une classe en théorie, elle peut être répétée à l'infini, de sorte que les définitions qui en nécessitent plusieurs. des références peuvent être utilisées.
(2).Problème prioritaire des attributs
La priorité de l'ID est supérieure à la classe, voir l'exemple ci-dessus
(3). C'est pratique pour les scripts clients tels que JS. Si vous souhaitez effectuer des opérations de script sur un objet dans la page, vous pouvez définir un identifiant pour celui-ci. Sinon, vous ne pouvez le trouver qu'en parcourant les éléments de la page et en spécifiant. des attributs spécifiques. C'est une perte de temps et de ressources, mais beaucoup moins simple qu'une pièce d'identité.
13. Conseils pour afficher le contenu dans LI avec des points de suspension après avoir dépassé la longueur
Cette technique est applicable aux navigateurs IE et OP
14. Pourquoi IE ne peut-il pas définir la couleur de la barre de défilement conformément aux normes du Web ?
La solution est de remplacer le corps par du HTML
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
Conseils de compatibilité CSS pour Firefox et IE
1. Problème de centrage Div
Le div est déjà centré lorsque margin-left et margin-right sont définis sur auto. Cela ne fonctionne pas avec IE. Il faut d'abord définir text-algin: center dans l'élément parent ; le contenu de l'élément parent est centré.
2. La bordure et le fond du lien (une balise)
Pour ajouter une bordure et une couleur d'arrière-plan à un lien, vous devez définir display: block et float: left pour garantir l'absence de saut 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, un espace peut être inséré dans la barre de menus.
3. Le problème selon lequel le style de survol n'apparaît pas après l'accès au lien hypertexte
Le style de lien hypertexte qui a été cliqué et visité n'est plus actif et de nombreuses personnes ont dû rencontrer ce problème. La solution est de changer l'ordre des attributs CSS : LVHA.
Code:
4. Curseur du doigt du curseur
curseur : le pointeur peut afficher la forme du doigt du curseur dans IE FF en même temps, la main ne peut être affichée que dans IE
Remplissage et marge de 5.UL
La balise ul a une valeur de remplissage par défaut dans FF, mais dans IE, seule margin a une valeur par défaut, donc définir d'abord ul{margin:0;padding:0;} peut résoudre la plupart des problèmes.
6. Balise FORMULAIRE
Cette étiquette aura automatiquement des marges dans IE, tandis que dans FF la marge est de 0. Par conséquent, si vous souhaitez l'afficher de manière cohérente, il est préférable de spécifier la marge et le remplissage en CSS. Pour résoudre les deux problèmes ci-dessus, mon CSS en général. , le style ul, form{margin:0;padding:0;} est défini en premier, vous n'aurez donc pas à vous en soucier plus tard.
7. Problème d'incohérence dans l'explication du modèle BOX
L'interprétation du modèle BOX dans FF et IE est incohérente, ce qui entraîne une différence de 2 pixels. Conseils pour la solution : div{margin:30px!important;margin:28px;} Notez que l'ordre des deux marges ne doit pas être inversé. attribut important, mais les navigateurs ne peuvent pas le reconnaître. Donc, sous IE, cela est en fait interprété comme ceci :
Si div{maring:30px;margin:28px} est défini à plusieurs reprises, le dernier sera exécuté, vous ne pouvez donc pas simplement écrire margin:xx px!important;#box{ width:600px; //for ie6.0- w; identifiant:500px ; //pour ff+ie6.0}
#box{ width:600px!important //pour ff width:600px; //pour ff+ie6.0 width /**/:500px //pour ie6.0-}
8. Sélecteur d'attribut (cela ne peut pas être considéré comme compatible, c'est un bug de masquage du CSS)
p[id]{}div[id]{}
Ceci est masqué pour IE6.0 et les versions inférieures à IE6.0 et fonctionne dans FF et Opera. Il existe toujours une différence entre les sélecteurs d'attribut et les sous-sélecteurs. La portée des sous-sélecteurs est réduite dans la forme, tandis que la portée de l'attribut. les sélecteurs sont relativement grands, comme p[id], toutes les balises p avec id sont du même style.
9.Les moyens les plus impitoyables - !important
S'il n'y a vraiment aucun moyen de résoudre certains problèmes détaillés, vous pouvez utiliser cette technique. FF analysera automatiquement "! Important" en premier, mais IE l'ignorera comme suit.
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important /*Style pour FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* Style pour IE */};
Il est à noter que la phrase xxxx !important doit être placée au-dessus d'une autre phrase.
10. Problème de valeur par défaut d'IE et FF
Peut-être vous êtes-vous plaint de la raison pour laquelle vous devez écrire des CSS différents spécifiquement pour IE et FF, pourquoi IE est un tel casse-tête, puis en écrivant du CSS, vous maudissez ce foutu M$ IE. En fait, IE n'a pas le support standard. pour CSS que nous faisons C'est aussi dégoûtant que vous l'imaginez, mais l'essentiel est que les valeurs par défaut d'IE et FF sont différentes Une fois que vous maîtriserez cette technique, vous constaterez qu'il n'est pas si difficile d'écrire du CSS comme ça. est compatible avec FF et IE. Peut-être que pour du CSS simple, vous n'en avez pas du tout besoin » !
Nous savons tous que lorsqu'un navigateur affiche une page Web, il décidera comment l'afficher en fonction de la feuille de style CSS de la page Web, mais nous ne décrirons pas nécessairement tous les éléments en détail dans la feuille de style, et bien sûr là Il n'est pas nécessaire de le faire. Ainsi, pour les attributs qui ne sont pas décrits, le navigateur utilisera la méthode d'affichage par défaut intégrée, telle que le texte. Si vous ne spécifiez pas de couleur en CSS, le navigateur utilisera le noir ou le système. color pour afficher l'arrière-plan de div ou d'autres éléments, s'il n'est pas spécifié en CSS, le navigateur le définira sur blanc ou transparent, et ainsi de suite pour d'autres styles non définis. Par conséquent, la raison fondamentale pour laquelle beaucoup de choses sont affichées différemment entre FF et IE est que leurs affichages par défaut sont différents. Quant à la façon dont ce style par défaut doit être affiché, je sais s'il existe des normes correspondantes dans w3 pour le stipuler, donc il n'y en a pas. besoin de commenter ce point.
11. Pourquoi le texte dans FF ne peut-il pas augmenter la hauteur du conteneur ?
Les conteneurs avec des valeurs de hauteur fixes dans les navigateurs standards ne seront pas étirés comme dans IE6. Donc, si je veux avoir une hauteur fixe et être étiré, quels paramètres dois-je effectuer ? La solution est de supprimer la hauteur et de définir ici min-height:200px, afin de prendre en charge IE6 qui ne connaît pas la hauteur min, elle peut être définie comme ceci :
{
hauteur:auto!important;
hauteur : 200 px ;
hauteur min : 200 px ;
}
12.Comment faire en sorte que les champs longs continus soient automatiquement renvoyés dans FireFox
Comme nous le savons tous, dans IE, vous pouvez utiliser directement Word-wrap:break-word. Dans FF, nous utilisons la technique d'insertion JS pour résoudre le problème.
13. Pourquoi la largeur du conteneur sous IE6 est-elle différente de celle dans FF ?
La différence dans le problème est de savoir si la largeur totale du conteneur inclut la largeur de la bordure. Ici, IE6 l'interprète comme 200PX, tandis que FF l'interprète comme 220PX. Alors, quelle est exactement la cause du problème ? Si vous supprimez le fichier XML en haut du conteneur, vous constaterez que le problème d'origine réside ici. L'instruction en haut déclenche le mode Qurks d'IE.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
Il existe de nouveaux problèmes avec la prise en charge de CSS par IE7.0, qui sont résolus comme suit.
Le premier type, CSS HACK
Bpx; /*Pour IE7 et IE6*/
_hauteur:20px; /*Pour IE6*/
Faites attention à la commande.
Ce qui suit est également un CSS HACK, mais ce n'est pas aussi simple que ci-dessus.
#exemple { couleur : #333 } /* Moz */
* html #exemple { couleur : #666 } /* IE6 */
*+html #exemple { couleur : #999 } /* IE7 */
La seconde consiste à utiliser des commentaires conditionnels spécifiques à IE.
La troisième méthode est la méthode de filtrage CSS. Ce qui suit est traduit de sites Web étrangers.
Créez un nouveau style CSS comme suit :
#article {
largeur : 200 px ;
hauteur : 200px ;
fond : rouge ;
}
Créez un nouveau div et utilisez le style CSS défini précédemment :
Ajoutez l'attribut lang ici dans la performance corporelle, le chinois est zh :
Définissez maintenant un autre style pour l'élément div :
*:lang(fr) #item{
arrière-plan:vert !important;
}
Ceci est fait pour écraser le style CSS d'origine avec !important. Étant donné que le sélecteur :lang n'est pas pris en charge par IE7.0, il n'aura aucun effet sur cette phrase. Par conséquent, le même effet sous IE6.0 est obtenu, mais il. est très difficile. Malheureusement, Safari ne prend pas non plus en charge cet attribut, vous devez donc ajouter le style CSS suivant :
#article :vide {
fond : vert !important
}
Le sélecteur :empty est une spécification CSS3. Bien que Safari ne prenne pas en charge cette spécification, cet élément sera toujours sélectionné. Que cet élément existe ou non, le vert apparaîtra désormais sur les navigateurs autres que les versions IE.
Pour la compatibilité avec IE6 et FF, vous pouvez considérer le précédent !important. Personnellement, je préfère le premier, qui est simple et a une meilleure compatibilité.