div+CSS kompatibel mit Xiaojie_Experience Exchange

Unterschied zwischen IE6 und FF:
Hintergrund:orange;*Hintergrund:blau;
Unterschied zwischen IE6 und IE7:
Hintergrund:grün !important;Hintergrund:blau;
Unterschied zwischen IE7 und FF:
Hintergrund:orange; *Hintergrund:grün;
Unterschied zwischen FF, IE7, IE6:
Hintergrund:orange;*Hintergrund:grün !wichtig;
IE7, IE8 kompatibel:

HEAD
1. Mehrere Browser in CSS unterstützen unterschiedliche Schlüsselwörter, die aus Gründen der Browserkompatibilität wiederholt definiert werden können
!wichtig kann von Firefox und IE7 erkannt werden
* kann von erkannt werden IE6, erkannt von IE7
_ erkannt von IE6
*+ erkannt von IE7
2. IE-spezifische bedingte Kommentare








3. Mehrere Browser sind eigentlich Erklärung Anzahl der Pixel
IE/Opera: Die tatsächliche Breite des Objekts = (Rand links) + Breite + (Rand rechts)
Firefox/Mozilla: Die tatsächliche Breite des Objekts = (Rand links) + ( border-left -width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)
4. Problem mit der Mausgeste: Das Cursorattribut von Firefox unterstützt keine Hand , aber sowohl Zeiger als auch IE unterstützen beide; aus Kompatibilitätsgründen wird Zeiger verwendet
5 Beim Festlegen des Style-Attributs des HTML-Tags in Firefox müssen alle Positions-, Breiten-, Höhen- und Größenwerte befolgt werden von px. IE unterstützt auch diese Schreibmethode, daher wird die px-Einheit einheitlich hinzugefügt. Beispiel: Obj.Style.Height = imgObj.Style.Height + 'px'
6. 5px; padding-right: 4px; padding-left: 1px0; margin:0px;padding:0px; wobei das margin-Attribut für IE und das padding-Attribut für FireFox gültig ist
8. CSS-Steuertransparenz: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60); border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright;
10. CSS-Doppellinien-Rand: IE: Rand: 2px Anfang;
-moz-border-top-colors: #d4d0c8 weiß; Farben: #d4d0c8 weiß;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080; IE unterstützt die CSS-Methode Cursor:url() zum Anpassen der Cursorstildatei und des Farbstils der Bildlaufleiste; FireFox Keines der oben genannten wird unterstützt
12. IE hat einen Fehler, bei dem das Select-Steuerelement immer oben ist und das gesamte CSS nicht funktioniert Wählen Sie das Steuerelement aus
13. IE unterstützt Label-Tags im Formular, einschließlich Bilder und Textinhalte; Firefox unterstützt keine Labels, die Bilder enthalten. Das Klicken auf das Bild hat keine Auswirkung auf das mit Radio oder CheckBox gekennzeichnete Label für
14 . TextArea in FireFox unterstützt das onScroll-Ereignis nicht
15. Wenn FireFox „margin-left“ und „margin-right“ auf „Auto“ setzt, ist es bereits zentriert, aber es funktioniert nicht im IE
17. Wenn Firefox text-align auf Body setzt, muss Div margin: auto (hauptsächlich margin-left margin-right) festlegen, bevor es zentriert werden kann
18. Am besten Legen Sie den CSS-Stil der Hyperlinks in dieser Reihenfolge fest: L-V-H-A.Das heißt,


Dadurch kann vermieden werden, dass einige Hyperlinks nach dem Besuch keine Hover- und aktiven Stile haben
19 Einstellen, dass lange Absätze automatisch in CSS umbrochen werden Setzen Sie im IE den Zeilenumbruch: Umbruchwort, um dies zu erreichen. Der spezifische Code lautet wie folgt:


20. Der Container kann Open
nicht automatisch unterstützen. Fügen Sie dem nächsten Tag nach dem Ende des Tags ein CSS „clear:both“ hinzu. 21. Nach dem Floating interpretiert IE6 den äußeren Rand als das Doppelte des tatsächlichen Rands
Lösung: display:inline hinzufügen 22. Unter IE6 entsteht eine Lücke
Lösung: display:block zu img hinzufügen oder das Vertical-Align-Attribut auf Vertical-Align: Top Bottom | setzen middle |text-bottom
23. Es gibt eine Lücke zwischen den beiden Ebenen unter IE6 Lösung: Stellen Sie das rechte Div so ein, dass es auch float:left ist, oder definieren Sie margin-right:-3px relativ zu IE6; 24. Der Inhalt in LI überschreitet die Länge. Dann werden die Auslassungspunkte
li {
width:200px
white- angezeigt. space:nowrap;
text-overflow:ellipsis;
overflow: versteckt; 🎜>25. Ändern Sie die Höhe und die Zeilenhöhe des Elements auf den gleichen Wert, um den Text vertikal zu zentrieren
-->

26 middle; Attributeinstellung in CSS

29. IE6 kann aufgrund des Standardzeilenhöhenproblems keinen Container definieren Lösung: Stellen Sie den Container wie folgt ein: overflow:hidden |. zoom:0.08 | line-height: 1px

30

31. FireFox reagiert entsprechend, nachdem das Padding-Attribut festgelegt wurde. Erhöhen Sie die Attributwerte für Breite und Höhe, IE wird dies nicht tun. Lösung: Verwenden Sie die Methode !important, um eine zu definieren zusätzlicher Satz von Höhe und Breite 32. FireFox ignoriert den Abstand zwischen Divs, aber IE verarbeitet ihn. Versuchen Sie daher, keine Leerzeichen und Wagenrückläufe zwischen zwei verbundenen Divs zu haben, da dies sonst zu einer falschen Formatierung zwischen verschiedenen Browsern führen kann wie die berühmte 3px-Abweichung; und der Grund ist schwer herauszufinden 33. Gebildet wie das folgende Format ist Wann Es gibt viele Inhalte, auch wenn das übergeordnete Element die Höhe auf 100 % oder „Auto“ festlegt. Unter verschiedenen Browsern bleibt die automatische Dehnung jedoch bestehen, indem am unteren Rand ein Leerzeichen mit einer Höhe von 1 generiert wird Schicht, der Code lautet wie folgt:
34. IE und FireFox interpretieren die Größe der Schrift klein unterschiedlich, FireFox beträgt 13 Pixel und IE beträgt 16 Pixel
35. IE und FireFox interpretieren die Größe der Leerzeichen unterschiedlich, FireFox beträgt 4 Pixel und IE beträgt 8 Pixel >
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 unserem täglichen Studium und bei der Arbeit mehr darauf achten, einige davon zu sammeln. Wir müssen nur online nach Lösungen suchen, wenn wir darauf stoßen.
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 in Zeile 2 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. Selbst 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, wie oben erwähnt, 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