1. CSS HACK
Les deux méthodes suivantes peuvent résoudre presque tous les HACK aujourd'hui.
1. !important
Avec la prise en charge de !important par IE7, la méthode !important est désormais uniquement pour le HACK d'IE6 (Faites attention à l'écriture. N'oubliez pas que la position de déclaration est nécessaire. pour être à l'avance.)
2. IE6/IE77 pour FireFox
*+html et *html sont des balises spécifiques à IE, qui ne sont pas prises en charge par Firefox encore. Et *+html C'est une balise unique pour IE7
Remarque :
*+html HACK pour IE7 doit s'assurer qu'il y a l'instruction suivante en haut du HTML :
http://www.w3.org/TR/html4/loose.dtd ">
2. Fermeture flottante universelle.
Pour le principe du flotteur clair, veuillez vous référer à [Comment effacer les flotteurs sans balisage structurel].
Ajoutez le code suivant à
CSS global et ajoutez class=
"clearfix" au div qui doit être fermé à chaque fois.
.clearfix:after
{
content:".";
display
:block
height:0;
clear
:
both
:
hidden
;
.clearfix {affichage: bloc;}
3. Autres conseils de compatibilité
1. Définir le remplissage sur div sous FF entraînera une augmentation de la largeur et de la hauteur, mais pas IE (peut être résolu avec !important)
2.
Centrer verticalement. line- La hauteur est définie à la même hauteur que le div actuel, puis vertical-align: middle (veillez à ne pas envelopper le contenu.)
2 Centrez-le horizontalement margin: 0 auto; pas omnipotent)
3. Si vous devez ajouter du contenu dans la balise a Pour le style supérieur, vous devez définir display: block; (commun dans les balises de navigation)
4. La différence de compréhension de BOX entre FF et IE conduit à un 2px différence et problèmes tels que la marge d'un div définie pour doubler sous IE
5. La balise ul est dans FF. Il existe un style de liste et un remplissage par défaut ci-dessous. Il est préférable de le déclarer à l'avance pour éviter des problèmes inutiles. Courant dans les balises de navigation et les listes de contenu)
6. Ne définissez pas la hauteur du div comme un wrapper externe. Il est préférable d'ajouter overflow: caché .Pour obtenir un haut degré d'adaptabilité
7. À propos du curseur manuel. . Et hand n'est applicable qu'à IE.
1. La plupart des styles CSS pour Firefox ie6 et ie7
sont désormais piratés avec !important. Pour les tests ie6 et Firefox, cela peut être normal,
mais ie7 peut interpréter correctement !important. la page ne s'affichera pas comme requis ! J'ai trouvé un bon hack
pour
IE7 en utilisant "*+html". Maintenant, parcourez-le avec IE7 et il ne devrait y avoir aucun problème.Maintenant, écrivez un CSS comme ceci :
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999 }
Ensuite, la couleur de la police est affichée comme #333 dans Firefox. . La couleur de la police est #666 sous IE6 et #999 sous IE7.
2La définition principale du style pour
les
problèmesde
centrage dans la mise en page CSS
est la suivante :body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto;
element: center; Cela signifie que le contenu de l'élément parent est centré ; ce paramètre est suffisant pour IE.
Mais il ne peut pas être centré sur Mozilla. La solution est d'ajouter "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" lors de la définition de l'élément enfant.
Il convient de noter que si vous souhaitez utiliser cette méthode pour centrer la page entière, il est recommandé de ne pas la définir. dans un Dans un DIV, vous pouvez diviser plusieurs divs en séquence,
définissez simplement MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
3 Différentes interprétations du modèle de boîte
#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width : 600px; //pour ff+ie6.0 width :500px; //pour ie6.0-}
4 Double distance générée par l'image flottante
#box{ float:left; margin:0 0 0 100px; kind Dans ces circonstances, IE générera une distance de 200px display:inline; //Ignorer le float} Parlons
en détail des deux éléments block et inline Les caractéristiques de l'élément Block sont : toujours commencer sur une nouvelle ligne, hauteur. , largeur, hauteur de ligne, les marges peuvent être contrôlées (éléments en ligne) ; les caractéristiques des éléments Inline sont : sur la même ligne que les autres éléments,... ne peuvent pas être contrôlées (éléments en ligne
#box{ display:block /
);/peut être des éléments en ligne Simuler comme un élément de bloc display:inline; //Obtenir l'effet de disposer dans la même ligne diplay:table;
IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme si il y a 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{ width:
80px; height: 35px;}html>body #box{ width: auto; min-width: 80px;
pages Largeur minimale
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 de garantir que la mise en page soit toujours correcte. Mais IE ne le reconnaît pas
et traite en fait la largeur comme la largeur minimale. Afin que cette commande fonctionne sur IE, vous pouvez placer un
Concevez ensuite 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, ce qui vous fera également Le document HTML n'est pas très formel. Il implémente en fait la largeur minimale via le jugement Javascript.
On peut aussi l’écrire directement sous la forme :
#conteneur{ largeur min:600px; *largeur:600px;}
De cette façon, la largeur minimale est de 600 PX, quel que soit IE ou FF.
7 Effacez le flottant
.hackbox{ display:table; //Affichez l'objet sous forme de table au niveau de l'élément de bloc} ou .hackbox{ clear:both;}
ou ajoutez-le. : after (Pseudo objet), définit le contenu qui apparaît après l'objet, généralement utilisé en conjonction avec le contenu. IE ne prend pas en charge ce pseudo-objet et n'est pas pris en charge par les navigateurs Ie,
il n'affecte donc pas les navigateurs IE/WIN. La chose la plus gênante à ce sujet... #box:after{ content: "."; display: block; clear: Both
;
le côté dubug
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 du côté gauche
. left{ float:left; width:50 %;}#right{ width:50%;}*html #left{ margin-right:-3px; //Cette phrase est la clé}
Code HTML
9 Sélecteur d'attribut (cela ne peut pas être considéré comme compatible, c'est un bug pour cacher le CSS)
p[id ]{}div[id]{}
Ceci concerne IE6.0 et les versions inférieures à IE6.0 sont masquées.
Il existe toujours une différence entre les sélecteurs d'attribut et les sous-sélecteurs dans FF et OPera. forme, alors que la portée des sélecteurs d'attributs est relativement large, comme p Dans [id], toutes les balises p avec des identifiants sont du même style
10 Problème de cache-cache dans IE
Lorsque l'application div est complexe, il existe des liens. dans chaque colonne, comme DIV. À ce stade, le problème de cache-cache se produit facilement.
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.
11 Non-adaptation de la hauteur
La non-adaptation de la hauteur signifie que la hauteur de la couche externe ne peut pas être automatiquement ajustée lorsque la hauteur de l'objet de la couche interne change, en particulier lorsque l'objet de la couche interne utilise
margin ou paddign.
Exemple :
Contenu dans l'objet p
CSS : #box {background-color:#eee; }
#box p {margin-top: 20px;margin - bottom: 20px; text-align:center; }
Solution : Ajoutez 2 objets div vides au-dessus et en dessous de l'objet CSS : .1{height:0px;overflow:hidden;} ou ajoutez l'attribut border au DIV.
La méthode suivante est une méthode d’analyse sous un autre angle :
Méthodes de gestion des BUG du navigateur compilées (en partie) pour les amis qui aiment partager la conception Web :
1. Astérisque*
IE peut reconnaître *, mais les navigateurs standards tels que FF ne peuvent pas reconnaître *.
Exemple : p { couleur:jaune; *couleur:rouge;}
Des similaires sont
+ signe plus
Seul IE explique
p{couleur:rouge; +couleur:bleu}
IE affiche le bleu et FF affiche le rouge
2.!important
IE6 et versions antérieures ignoreront ce style, IE7 FF le prendra en charge ;
p{couleur:rouge !important;couleur:jaune;}
IE7 FF affichera le rouge IE6 jaune
Notez ici que la méthode !important n'est ignorée par IE6 et versions antérieures qu'après avoir suivi le format ci-dessus. D'autres méthodes pour augmenter le poids du style peuvent être utilisées universellement.
3. Soulignez.
Les versions IE6 et inférieures utiliseront ce style, les autres seront ignorées.
p{couleur:rouge; _couleur:bleu}
4. Remarques :
p{couleur:rouge};
Ce style peut être appliqué et affiché dans IE6, mais ne sera pas traité dans IE5 et les versions antérieures, il peut donc être distingué pour IE5/6.
5. @IMPORTER :
Utilisez l'URL dans @IMPORT pour importer des styles. L'utilisation standard est de mettre la valeur dans l'URL entre guillemets, comme suit @IMPORT URL("newstyle.css"); réalisation Les styles d'IE4 sont traités séparément.
De plus, il existe une autre méthode :
Écran @IMPORT URL("noie.css") ;
Screen est une option utilisée pour spécifier le type de périphérique, screen est utilisé pour l'affichage de l'écran et print est utilisé pour l'affichage du périphérique d'impression. Cependant, IE ne prend pas en charge cette méthode et tous les navigateurs IE peuvent faire la distinction entre IE et FF.
6. Sélecteur d'attributs : utilisé pour sélectionner des objets avec des attributs spécifiques
span[class=left]{couleur:bleu}
span[titre]{couleur:rouge;}
IE6 ne le prend pas en charge, mais cela fonctionne bien dans FF, donc IE et FF peuvent être traités séparément.
Dans le développement réel, IE et FF doivent souvent être traités séparément. Vous pouvez utiliser le code suivant :
#contenu{
couleur : rouge ;
}
[xmlnx] #contenu{
couleur: bleu
}
Je pense que cette méthode est très pratique et est fréquemment utilisée. Je la recommande à mes amis. Si vous avez besoin d'explications plus détaillées, je peux la publier à nouveau.
7. Sélecteur de sous-objet :
span>p{couleur:rouge}
IE6 n'est pas non plus pris en charge et peut également être utilisé pour distinguer IE et FF.
8. Méthode Tantek
#contenu{
couleur : bleu ;
famille vocale : ""}"" ;
famille vocale : hériter ;
couleur : rouge ;
}
Après avoir utilisé voice-family dans le code ci-dessus, la couleur suivante : rouge ne sera pas analysée par les navigateurs IE5.5 et inférieurs. Par conséquent, la couleur du texte apparaîtra en rouge sur IE6/7/FF et sur IE5.5 et inférieurs. apparaîtra en bleu sur le navigateur ;
De plus, il existe une autre façon de gérer la famille vocale :
#contenu{
couleur : rouge ;
famille vocale : "}"
famille vocale : hériter ;
couleur : bleu ;
}
En utilisant cette méthode, le texte dans les navigateurs IE6 et inférieurs et dans le navigateur FF apparaîtra en rouge, tandis que le texte dans les navigateurs IE5 et inférieurs apparaîtra en bleu !
9. Attributs d'évasion
p{largeur:200px;}
IE5.5 et versions antérieures seront ignorés. Remarque : Le caractère barre oblique inverse ne peut pas apparaître avant 0-9 ou la lettre af.
10. Commentaires conditionnels dans IE 1. Introduction aux commentaires conditionnels
Les commentaires conditionnels dans IE ont une excellente capacité à distinguer les versions IE des versions IE et non-IE, et sont couramment utilisés dans la conception WEB.
méthode de piratage.
Les commentaires conditionnels ne peuvent être utilisés que dans IE5 et versions ultérieures.
Si plusieurs IE sont installés, les commentaires conditionnels seront basés sur la version la plus élevée d’IE.
La structure de base des commentaires conditionnels est la même que celle des commentaires HTML (). Par conséquent, les navigateurs autres que IE les traiteront comme des commentaires ordinaires et les ignoreront complètement.
IE utilisera la condition if pour déterminer s'il faut analyser le contenu du commentaire conditionnel comme le contenu normal de la page.
2. Attributs d'annotation conditionnelle
gt : supérieur à, sélectionnez la version conditionnelle ou supérieure, à l'exclusion de la version conditionnelle
lt : inférieur à, sélectionnez la version en dessous de la version conditionnelle, excluant la version conditionnelle
gte : supérieur ou égal, sélectionnez la version conditionnelle ou supérieure, y compris la version conditionnelle
lte : inférieur ou égal, sélectionnez la version en dessous de la version conditionnelle, y compris la version conditionnelle
! : Sélectionnez toutes les versions sauf la version conditionnelle, quelle que soit la version haute ou basse, comment utiliser les commentaires conditionnels
Faites attention à remplacer le <> dans le code par le signe supérieur ou inférieur correspondant en anglais.
Le code suivant est un commentaire conditionnel qui s'exécute sous les navigateurs non-IE
Vous n'utilisez pas Internet Explorer
Vous utilisez Internet Explorer version 6 ou un navigateur non-IE