div+CSS compatible avec l'échange Xiaojie_Experience

Différence entre IE6 et FF :
background:orange;*background:blue;
Différence entre IE6 et IE7 :
background:green !important;background:blue
Différence entre IE7 et FF :
fond :orange; *fond:vert;
Différence entre FF, IE7, IE6 :
fond:orange;*fond:vert !important;*fond:bleu
compatible IE7, IE8 :

HEAD
1. Plusieurs navigateurs en CSS prennent en charge différents mots-clés, qui peuvent être définis à plusieurs reprises pour la compatibilité du navigateur
!important peut être reconnu par FireFox et IE7
* peut être reconnu par IE6, Reconnu par IE7
_ Reconnu par IE6
*+ Reconnu par IE7
2 Commentaires conditionnels spécifiques à IE







3. Plusieurs navigateurs sont en fait Explication de pixels
IE/Opera : La largeur réelle de l'objet = (marge gauche) + largeur + (marge droite)
Firefox/Mozilla : La largeur réelle de l'objet = (marge gauche) + ( border-left -width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
4. Problème de geste de la souris : l'attribut de curseur de FireFox ne prend pas en charge la main. , mais c'est le cas. Le pointeur et IE prennent en charge les deux ; donc pour des raisons de compatibilité, le pointeur est utilisé
5. Lors de la définition de l'attribut Style de la balise HTML dans FireFox, toutes les valeurs de position, de largeur, de hauteur et de taille doivent être suivies. par px. IE prend également en charge cette méthode d'écriture, elle est donc ajoutée uniformément. Par exemple, Obj.Style.Height = imgObj.Style.Height + 'px';
6. FireFox ne peut pas analyser le paramètre d'attribut de remplissage abrégé, tel que padding 5px 4px 3px 1px ; 5px; padding-right :4px; padding-bottom:3px; padding-left:1px0; Lors de l'élimination de l'indentation des listes telles que ul et ol, le style doit être écrit comme suit : list-style:none; margin:0px;padding:0px; où L'attribut margin est valide pour IE et l'attribut padding est valide pour FireFox
8. Transparence du contrôle CSS : IE : filter:progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60); FireFox : opacity:0.6;
9. Contrôle CSS des coins arrondis : IE : ne prend pas en charge les coins arrondis
FireFox : -moz-border-radius:4px ou
-moz- ; border-radius-topleft:4px;
-moz-border -radius-topright:4px;
-moz-border-radius-bottomleft:4px;
10. Bordure CSS à double ligne : IE : bordure : début 2px
FireFox :
-moz-border-top-colors : #d4d0c8 blanc
-moz-border-left-; couleurs : #d4d0c8 blanc ;
-moz-border-right-colors :#404040 #808080 ;
-moz-border-bottom-colors :#404040 #808080
11. slider:url() pour personnaliser le fichier de style du curseur et le style de couleur de la barre de défilement ; FireFox Aucun des éléments ci-dessus n'est pris en charge
12. IE a un bug où le contrôle Select est toujours au premier plan et tous les CSS ne fonctionnent pas sur le Sélectionnez le contrôle
13. IE prend en charge les balises d'étiquette dans le formulaire, y compris les images et le texte. FireFox ne prend pas en charge les étiquettes contenant des images. Cliquer sur l'image n'entraînera pas l'effet de l'étiquette étiquetée Radio ou CheckBox
14. . TextArea dans FireFox ne prend pas en charge l'événement onScroll
15 FireFox ne prend pas en charge l'affichage en ligne et le bloc
16 Lorsque FireFox définit margin-left et margin-right sur auto sur Div, il est déjà centré, mais. cela ne fonctionne pas dans IE
17. Lorsque FireFox définit l'alignement du texte sur Body, Div doit définir margin: auto (principalement margin-left margin-right) avant de pouvoir le centrer
18. Il est préférable de le faire. définissez le style CSS des hyperliens dans cet ordre : L-V-H-A.Autrement dit,


Cela peut éviter que certains hyperliens après avoir été visités n'aient pas de styles de survol et d'activité
Définition des longs paragraphes pour qu'ils soient automatiquement renvoyés en CSS. dans IE Définissez word-wrap:break-word dans FireFox ; utilisez la méthode d'insertion JS pour y parvenir. Le code spécifique est le suivant :


20. le conteneur ne pourra pas prendre automatiquement en charge Open
Solution : ajoutez un CSS clear:both
à la balise suivante après la fin de la balise 21. Après le flottement, IE6 interprète la marge extérieure comme le double de la marge réelle <.> Solution : ajoutez display:inline 22. Il y aura un espace sous l'image sous IE6
Solution : ajoutez display:block à img ou définissez l'attribut vertical-align sur vertical-align:top bottom | middle |text-bottom
23. Il y a un écart entre les deux couches sous IE6 Solution : définissez le div droit pour qu'il flotte également float:left ou définissez margin-right:-3px par rapport à IE6
24. Le contenu de LI dépasse la longueur. Ensuite, affichez les points de suspension


25. Modifiez la hauteur et la hauteur de ligne de l'élément sur la même valeur pour centrer le texte verticalement 26. Pour aligner le texte et les zones de saisie de texte, vous devez ajouter un alignement vertical : middle ; paramètre d'attribut en CSS

27. Si un navigateur qui prend en charge les standards WEB définit une valeur de hauteur fixe, il ne sera pas étiré comme IE6, mais vous souhaitez définir une hauteur fixe et pouvoir être étiré ? consiste à supprimer l'attribut height et à définir min-height , afin d'être compatible avec IE6 qui ne prend pas en charge min-height, il peut être défini comme suit :

{

height:auto!important; height:200px;
min-height:200px;

}
28. IE ne peut pas définir la couleur de la barre de défilement selon les normes du Web
Solution : modifiez le paramètre du corps en CSS en html

scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff; -shadow-color:#eeeeee;

scrollbar-3dlight-color:# eeeeee

scrollbar-arrow-color:#000;
scrollbar-track-color:#fff; -color:#fff; } --> 29 IE6 ne peut pas définir un conteneur avec une hauteur d'environ 1px en raison du problème de hauteur de ligne par défaut . Solution : définissez le conteneur en CSS tel que : overflow:hidden | zoom:0.08 | line-height: 1px 30. Définir l'attribut transparent sur Flash permet d'afficher le calque au-dessus de Flash . 31. FireFox répondra en conséquence après avoir défini l'attribut Padding. Augmentez les valeurs des attributs de largeur et de hauteur, IE ne le fera pas. Solution : utilisez la méthode !important pour définir un ensemble supplémentaire de hauteur et de largeur 32. FireFox ignore l'espace entre les divs, mais IE le gère. Par conséquent, essayez de ne pas avoir d'espaces et de retours chariot entre deux divs connectés, sinon cela pourrait entraîner un formatage incorrect entre différents navigateurs, par exemple. comme la fameuse déviation de 3px ; et la raison est difficile à trouver 33. Formé comme Le format suivant est Quand il y a beaucoup de contenu, même si le parent définit la hauteur à 100% ou auto, il ne sera toujours pas intact sous différents navigateurs. Étirement automatique, la solution est de générer un espace d'une hauteur de 1 en bas du contenu. couche, le code est le suivant
34. IE und FireFox haben unterschiedliche Interpretationen der Schriftgröße „Small“, FireFox ist 13 Pixel und IE ist 16 Pixel.
35. IE und FireFox haben unterschiedliche Interpretationen der Größe von Leerzeichen, FireFox ist 4 Pixel und IE ist 8px

Erstens gibt es im Internet viele Einführungen in CSS-Hack-Methoden, und Anfänger fühlen sich oft verwirrt. Einige dieser CSS-Hack-Methoden zielen auf eine ganz spezielle Situation ab, während andere relativ allgemeine Methoden sind.
Für Letzteres können wir in unserer täglichen Studienarbeit mehr darauf achten, einige zu sammeln. Ersteres muss nicht allzu viel Aufmerksamkeit schenken. Wir müssen nur online suchen, um Lösungen zu finden.
Hier ist eine allgemeinere Hack-Methode. Wir hoffen beispielsweise, für ein bestimmtes Attribut in CSS unterschiedliche Werte für verschiedene Browser festzulegen. Beispielsweise soll für ein bestimmtes Div die Breite in Firefox 50 Pixel und im IE 60 Pixel betragen. Wie kann man es erreichen? Bitte sehen Sie sich den folgenden Code an:

#demo div{
width:50px; /* FireFox valid*/
+width:60px; /* IE valid*/
}

Im obigen Code ist width:50px ein normaler Stil. Fügen Sie in der nächsten Zeile ein Pluszeichen vor dem width-Attribut hinzu. Dieser Stil wird in Firefox als ungültig angesehen, im IE jedoch Die Zahl wird ignoriert, daher wird sie weiterhin als Breitenattribut verstanden und überschreibt somit die Einstellung des vorherigen Elements, sodass Firefox-Browser und IE-Browser unterschieden werden können.
Was ist, wenn Sie zwischen IE 6 und IE 7 weiter unterscheiden möchten? Bitte sehen Sie sich den folgenden Code an:

#demo div{
width:50px; /* FireFox valid*/
+width:60px; /* IE 7 valid*/
_width:70px ; /* IE 6 valid*/
}

Der obige Code kann die drei Browser unterscheiden. Wenn in IE7 vor dem Attribut ein Pluszeichen hinzugefügt wird, wird das Pluszeichen ignoriert. Wenn vor dem Attribut ein Unterstrich hinzugefügt wird, wird der gesamte Stil ignoriert, wodurch der Unterschied zwischen den drei Mainstream-Browsern erkannt wird.
An diesem Punkt denken wir natürlich: Unter welchen Umständen würde diese Methode zur Unterscheidung von Browsern verwendet werden? Für die Seiten, die wir erstellen möchten, gibt es normalerweise zwei Situationen: Die eine besteht darin, sie von Grund auf zu erstellen, und die andere darin, sie basierend auf einer vorhandenen Webseite zu ändern oder zu reparieren.
Im ersten Fall sind wir uns über jedes Detail der Webseite im Klaren, sodass wir nicht oft auf Kompatibilitätsprobleme mit Firefox und IE stoßen. Auch wenn wir auf sie stoßen, können wir normalerweise andere Möglichkeiten finden, sie zu lösen. Im zweiten Fall ist es viel komplizierter, da eine Webseite sehr komplex sein kann und auch die Kaskadenbeziehung sehr kompliziert ist. Für die Person, die später übernimmt, ist es schwierig herauszufinden, wie viele Einstellungsebenen auf einer Seite vorhanden sind Eine bestimmte Eigenschaft wirkt sich auf ihn aus und kann daher oft nur durch „Verputzen“ repariert werden.
Zum Beispiel der endgültige Effekt der folgenden Seite: Wenn im IE das Feld mit abgerundeten Ecken erstellt wird, erscheint nach der Ausrichtung der abgerundeten Ecken eine Fehlausrichtung, wie im Bild in Firefox gezeigt, und wenn sie gemäß Firefox angepasst wird, Im IE wird es erneut zu einer Fehlausrichtung kommen.
Der Inhalt der Seite ist Schicht für Schicht verschachtelt und es ist schwierig, die Ursache des Problems zu finden, ohne die Details zu kennen. Daher ist es hier sehr praktisch, die Patching-Methode zu verwenden (obwohl dies nicht die eleganteste und vollständigste Methode ist). Verwenden Sie beispielsweise für die Attribute, die die Position des abgerundeten Bildes steuern, die obige Methode und steuern Sie sie separat.
Zusammenfassend lässt sich sagen, dass Sie für jedes Attribut die Pluszeichen- oder Unterstreichungsmethode verwenden können, um individuelle Einstellungen für verschiedene Browser zu erreichen. Abschließend muss natürlich darauf hingewiesen werden, dass jede Hackmethode mit Vorsicht verwendet werden muss. Es ist am besten, einen solchen Code gemäß dem Standard und elegant zu entwerfen, was auch unser Ziel ist verfolgen.

Warum hat div+css kein Problem in IE6, aber ein Problem in Firfox, das ernsthaft außer Form ist, was ist der Grund, danke
Der größte Unterschied zwischen IE und FF ist 1 . Bei einer Auflösung von 1024 zeigt IE bis zu 1002PX und FF 1005PX2 an. IE ist super fehlertolerant, was bedeutet, dass, wenn Sie den falschen Code schreiben und weniger schreiben, möglicherweise das richtige FF angezeigt wird~~~`Ein häufiges Problem für Anfänger: Floating Floats werden nicht gelöscht~~~~.clear{ klar: Both; height: 1px; top:-1px; overflow:hidden} Fügen Sie nach jedem Float ein

hinzu