1. "L'utilisation d'important dans IE6 et FF"
.box1 {largeur : 150px !important;}
.box1 {largeur : 250 px ;}
!important signifie que ce paramètre est prioritaire. IE ne fera pas d'erreur lorsqu'il rencontrera !important et ignorera simplement sa fonction si la largeur est définie plus tard, IE prendra la dernière largeur définie comme critère. il utilisera la valeur actuelle, qui est la valeur précédente !importante. Par exemple : #test {width : 300px !important}IE et FF affichent tous deux 300PX. S'il y a une valeur à la fin, IE affichera la valeur suivante, et FF affichera la valeur avec !import devant !
D'autres navigateurs considèrent cela comme important. En raison du rapport de priorité, la largeur définie précédemment prévaut toujours.
#test {largeur:300px;largeur:400px !important ;}
Le résultat affiché dans cette phrase est que la largeur de IE et FF est toutes deux de 400PX
#test {largeur:300px !important ;largeur:400px;}
Le résultat d'affichage de cette phrase est FF : 300px IE : 400px
Par conséquent, lorsque vous utilisez !important, placez les mots contenant !important devant.
Mais le problème revient, IE7 peut déjà reconnaître !important, veuillez voir ci-dessous !
2. Styles CSS pour Firefox ie6 ie7
De nos jours, la plupart d'entre eux utilisent !important pour le piratage. Les tests ie6 et Firefox peuvent s'afficher normalement, mais ie7 peut interpréter correctement !important, ce qui empêchera l'affichage de la page 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 { couleur : #333 } /* Moz */
* html #1 { couleur : #666 } /* IE6 */
*+html #1 { couleur : #999 } /* IE7 */
Ensuite, la couleur de la police s'affiche sous la forme #333 sous Firefox, #666 sous IE6 et #999 sous IE7. Vous pouvez utiliser "+" pour implémenter CSS Hack qui n'est reconnu que par IE. Certains amis peuvent penser à utiliser "_" Hack. , mais ils se distinguent car "_" n'est pas reconnu dans IE7. Alors utilise +
Résultats des tests :
Les navigateurs IE5.5, IE6 et IE7 peuvent le reconnaître ;
Les navigateurs FF2.0, Opera 9 et Safari 2 ne le reconnaissent pas.
3. Piratage d'IE7
IE7 a corrigé de nombreux bugs et ajouté la prise en charge de certains sélecteurs, donc désormais les hacks pour masquer ou afficher IE tels que *html {}, html>body {}, !important, etc. ne fonctionneront pas dans IE7. Bien que CSS Hack ne soit pas recommandé et que les commentaires conditionnels soient un filtre infaillible, les commentaires conditionnels ne peuvent apparaître qu'en HTML, donc CSS Hack a toujours sa place. Nanobot a découvert quelques hacks CSS pour IE7, en particulier :
>corps
HTML*
*+html
Parmi ces trois méthodes d'écriture, les deux premières sont des méthodes d'écriture CSS illégales et sont ignorées dans les navigateurs conformes aux normes, mais IE7 ne le pense pas. Pour >body, il remplacera le sélecteur manquant par le sélecteur global *, c'est-à-dire qu'il sera transformé en *>body, et ce phénomène existe également non seulement pour le sélecteur >, mais aussi pour les sélecteurs + et ~. Pour html*, puisqu'il n'y a pas d'espace entre html et *, c'est aussi une erreur de syntaxe CSS, mais IE7 ne l'ignorera pas, mais croit à tort qu'il y a un espace ici. Pour le troisième type *+html, IE7 estime que la déclaration DTD devant html est également un élément, donc html sera sélectionné parmi ces trois méthodes, seule cette méthode est une écriture CSS légale, ce qui signifie qu'elle peut passer le validateur. La vérification est donc également une utilisation de hack recommandée par l'auteur.
Internet Explorer 6 et versions antérieures
Utilisez * html {} pour sélectionner l'élément html.
IE 7 et versions antérieures
Utilisez *+html, * html {} pour sélectionner l'élément html.
IE 7 uniquement
Utilisez *+html {} pour sélectionner l'élément html.
IE 7 et navigateurs modernes uniquement
Utilisez html>body {} pour sélectionner l'élément body.
Navigateurs modernes uniquement (pas IE 7)
Utilisez html>/**/body {} pour sélectionner l'élément body.
4. IE et FF ont des interprétations différentes du modèle de boîte. Description du code : #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff }
La bande passante affichée par le test est de 650px
La largeur totale de IE Box est : la somme des largeurs de width+padding+border+margin La largeur totale de FF Box est la largeur de width, et la largeur de padding+border+margin est incluse dans la largeur.
S'il y a BOX{WIDTH:"300"; PADDING:"5PX";}, la largeur de la BOX dans IE doit être : 310. La largeur de FF est de 300, donc lorsque la BOX est remplie, vous devez utiliser BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}, afin de vous assurer que la largeur de la BOX est toujours de 300px, et Il n'y aura aucun phénomène d'étirement, et dans FF il n'y aura aucune situation dans laquelle la couche flottante ne sera pas complètement remplie.
5. La balise ul a une valeur de remplissage dans Mozilla, mais seule la marge a une valeur dans IE.
Définir ul{margin:0;padding:0}
6. IE ne peut pas faire la différence entre la relation d'héritage et la relation père-fils. Ce sont toutes des relations d'héritage.
7. Définir le remplissage sur un div dans FF entraînera une augmentation de la largeur et de la hauteur, mais pas IE (peut être résolu avec !important).
8. Problème de centrage
1. Centrer verticalement. Définissez la hauteur de ligne à la même hauteur que le div actuel, puis passez vertical-align: middle (veillez à ne pas envelopper le contenu.)
2. Marge centrée horizontalement : 0 auto (bien sûr pas universelle)
3. Si vous devez ajouter des styles au contenu de la balise a, vous devez définir display: block (courant dans les balises de navigation)
4. La différence dans la compréhension de BOX entre FF et IE conduit à une différence de 2 pixels et à des problèmes tels que la marge d'un div définie pour flotter doublant sous IE.\
5. Différentes performances d’UL :
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. Ne définissez pas la hauteur du div comme wrapper externe. Il est préférable d'ajouter overflow: caché pour obtenir une adaptation en hauteur.
9. Concernant le curseur manuel, il ne s'applique qu'à IE. Si IE et FF le reconnaissent, veuillez utiliser le curseur : pointeur.