Le hack CSS est une méthode générale pour obtenir une compatibilité parfaite CSS avec l'échange IE6/IE7/FF_Experience

Il est courant que CSS soit compatible avec différents navigateurs. Il existe des tutoriels partout sur Internet. Le contenu suivant n'est pas trop nouveau et est purement un résumé personnel. J'espère qu'il sera utile aux débutants. 1. CSS HACK
Les deux méthodes suivantes peuvent résoudre presque tous les HACK aujourd'hui

1, !important

Avec la prise en charge par IE7 de !important, la méthode !important est désormais uniquement pour IE6. HACK. (Faites attention à l'écriture. N'oubliez pas que la position de la déclaration doit être effectuée à l'avance.)
width: 100px!important; */
largeur : 80px; /* IE6 */
}



2, IE6/IE77 pour FireFox
*+html et *html sont des balises spécifiques à IE, Firefox ne les prend pas en charge actuellement. Et *+html est une balise unique pour IE7
*+html HACK pour IE7 doit garantir la déclaration suivante en haut du HTML :



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 au CSS global et ajoutez class="clearfix" au div qui doit être fermé. Cela fonctionne à chaque fois


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. Problème de centrage
1). Réglez la hauteur de la ligne à la même hauteur que le div actuel, puis passez vertical-align: middle. pour ne pas envelopper le contenu.)
2). pour définir display: block; (commun dans les balises de navigation)
4. La différence de compréhension de BOX entre FF et IE entraîne une différence de 2 pixels dans les divs définis sur float. Problèmes tels que le doublement de la marge sous IE. , La balise ul a un style de liste et un remplissage par défaut sous FF. Il est préférable de la déclarer à l'avance pour éviter des problèmes inutiles (courant dans les balises de navigation et les listes de contenu)
6. En tant que wrapper externe, ne définissez pas. la hauteur du div. Il est préférable d'ajouter overflow: caché pour obtenir une adaptabilité en hauteur
7. Concernant le curseur de la main : le pointeur est uniquement applicable à IE. styles pour Firefox ie6 ie7
Maintenant, la plupart d'entre eux utilisent !important pour pirater, et le test pour ie6 et Firefox peut s'afficher normalement Mais ie7 peut interpréter correctement !important, ce qui entraînera l'échec de l'affichage de la page. demande! Trouvez une épingle Un bon hack pour IE7 est d'utiliser "*+html". Maintenant, parcourez-le avec IE7 et il ne devrait y avoir aucun problème. Maintenant, écrivez un CSS comme celui-ci : #1 { color: #333; } /* Moz */ * html #1 { color: #666 } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ Ensuite, la couleur de la police est affichée comme #333 sous Firefox, #666 sous IE6 et #999 sous IE7 . 2 Problèmes de centrage dans la mise en page CSS Les principales définitions de style sont les suivantes : body {TEXT-ALIGN: center;} #center {MARGIN-RIGHT: auto; MARGIN -LEFT: auto; } Explication : Définissez d'abord TEXT-ALIGN : center dans l'élément parent ; cela signifie que le contenu de l'élément parent est centré pour IE, ce paramètre est suffisant ; Mais il ne peut pas être centré dans Mozilla. La solution est d'ajouter "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" lors de la définition de l'élément enfant A noter que si vous souhaitez utiliser cette méthode pour centrer la page entière, il est recommandé de ne pas pour définir 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; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 Double généré par flottant ie Distance

#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. Les caractéristiques de l'élément Block sont : 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éments block) ; les caractéristiques de l'élément Inline sont : et Les autres éléments sont sur la même ligne,... ne peuvent pas être contrôlés (éléments en ligne

#box{ display:block; //Peut simuler des éléments en ligne comme des éléments de bloc) ; display:inline; //Obtenir la même chose L'effet de la disposition des lignes display:table

IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme s'il y avait min. Cela posera 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, cela équivaut à ne pas le faire. définir la largeur et la hauteur sous IE élevé.
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 min-height: 35px; ;}

6 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, de sorte que la mise en page peut toujours être correcte. Mais IE ne le reconnaît pas,
et il traite en fait la largeur comme la largeur minimale. Afin de faire fonctionner cette commande sur IE, vous pouvez mettre un
sous la balise

, puis spécifier une classe pour le div : Ensuite, le CSS est conçu comme ceci :
#container{ min-width : 600px; width:expression(document.body.clientWidth La première min-width est normale mais la largeur de la ligne 2 utilise Javascript, qui uniquement Seul IE peut le reconnaître, ce qui rendra également votre document HTML moins formel. Il implémente en fait la largeur minimale via le jugement Javascript.
7 Effacer les flottants

.hackbox{ display:table; //Affiche l'objet sous forme de table au niveau de l'élément de bloc} ou .hackbox{ clear:both;}
Ou ajoutez : 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 les navigateurs non-Ie le prennent en charge
Cela n'affecte donc pas les navigateurs IE/WIN. . La chose la plus gênante à ce sujet... #box:after{ content: "."; display: block; height: 0; clear: Both; un bug de 3 pixels

L'objet de gauche flotte et le côté droit est positionné en utilisant la marge gauche du patch extérieur. Le texte dans l'objet de droite aura un espacement de 3 pixels par rapport à 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é}
Code HTML

9 Sélecteur d'attribut (ceci n'est pas considéré comme compatible, c'est un bug dans css caché)

p[id]{}div[id]{}
Ceci est masqué pour IE6.0 et les versions inférieures, et est utilisé par FF et OPera
Il y a encore une différence entre le sélecteur d'attribut et le sous-sélecteur, sous-sélecteur La portée du sélecteur est de forme réduite et la portée du sélecteur d'attribut est relativement grande. Par exemple, dans p[id], toutes les balises p avec des identifiants sont identiques. style.

10 Problème de cache-cache dans IE

Lorsque l'application div est complexe et qu'il y a des liens dans chaque colonne, le problème de cache-cache se produit facilement dans 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.

11 Non-adaptation de la hauteur

La non-adaptation de la hauteur signifie que lorsque la hauteur de l'objet de la couche interne change, la hauteur de la couche externe ne peut pas être automatiquement ajustée, en particulier lorsque l'objet de la couche interne utilise
marge ou heure 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 du code CSS de l'objet P : .1{height:0px ;overflow : Hidden;} Ou ajoutez l'attribut border au DIV.