CSS-Hack ist eine allgemeine Methode, um eine perfekte CSS-Kompatibilität mit dem IE6/IE7/FF_Experience-Austausch zu erreichen

Es ist ein alltägliches Problem, dass CSS mit verschiedenen Browsern kompatibel ist. Der folgende Inhalt ist nicht allzu neu, ich hoffe, dass er für Anfänger hilfreich ist > 1. CSS-HACK
Die folgenden zwei Methoden können heute fast alle HACKs lösen

1, !important

Mit der Unterstützung von !important durch IE7 ist die !important-Methode jetzt nur noch für IE6 HACK. (Achten Sie auf die Schreibweise. Denken Sie daran, dass die Deklarationsposition im Voraus angegeben werden muss.)
width: 100px!important; FF */
width : 80px; /* IE6 */
}



2, IE6/IE77 für Firefox
*+ html und *html sind IE-spezifische Tags, Firefox unterstützt sie derzeit nicht. Und *+html ist ein eindeutiges Tag für IE7 : 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 behoben */
*+html #wrapper { width: 60px;} /* ie7 behoben, achten Sie darauf Die Reihenfolge */
}
style> nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

Hinweis:
*+html HACK für IE7 muss die folgende Anweisung oben im HTML sicherstellen:


2. Universeller Float-Verschluss

Informationen zum Prinzip des Clear Float finden Sie unter [So löschen Sie Floats ohne strukturelles Markup]
Fügen Sie den folgenden Code zu Global CSS hinzu und Fügen Sie class="clearfix" zum Div hinzu, das geschlossen werden muss. Es funktioniert jedes Mal 🎜>content:";
display:block;
clear:both;
.clearfix
{
display:inline-block;
}
/* Ausblenden vor IE Mac * /
.clearfix {display:block;}
/* Ausblenden vor IE Mac */
/ * Ende von Clearfix */


3. Andere Kompatibilitätstipps

1 . (kann mit !important gelöst werden)
1. Stellen Sie die vertikale Mitte auf die gleiche Höhe wie das aktuelle Div Achten Sie darauf, den Inhalt nicht zu umbrechen.)
2). Horizontal zentriert: 0 auto; (Natürlich ist es nicht allmächtig)
3 muss display: block; (üblich in Navigations-Tags)
4 festlegen. Der Unterschied im Verständnis von BOX zwischen FF und IE führt zu einem Unterschied von 2 Pixeln bei der Einstellung von Divs unter IE
5. Das ul-Tag verfügt standardmäßig über Listenstil und Auffüllung. Es ist am besten, es im Voraus zu deklarieren, um unnötige Probleme zu vermeiden.
6. Als externer Wrapper nicht Stellen Sie die Höhe des Div ein. Es ist am besten, Überlauf hinzuzufügen. Bezüglich des Handcursors gilt:
1 CSS-Stile für Firefox ie6 ie7
Jetzt verwenden die meisten von ihnen !important zum Hacken, und der Test für ie6 und Firefox kann normal angezeigt werden
Aber ie7 kann !important korrekt interpretieren, was dazu führt, dass die Seite fehlschlägt auf Wunsch! Finden Sie einen Pin
Ein guter Hack für IE7 ist die Verwendung von „*+html“. Durchsuchen Sie ihn jetzt mit IE7 und es sollte kein Problem geben.
Schreiben Sie nun ein CSS wie dieses:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
Dann wird die Schriftfarbe unter Firefox als #333, unter IE6 als #666 und unter IE7 als #999 angezeigt. 2 Zentrierungsprobleme im CSS-Layout Die wichtigsten Stildefinitionen lauten wie folgt: body {TEXT-ALIGN: center;} #center {MARGIN-RIGHT: auto; MARGIN -LEFT: auto; } Erklärung: Definieren Sie zuerst TEXT-ALIGN: center im übergeordneten Element. Dies bedeutet, dass der Inhalt im übergeordneten Element zentriert ist. Aber es kann nicht in Mozilla zentriert werden. Die Lösung besteht darin, beim Festlegen der Definition des untergeordneten Elements „MARGIN-RIGHT: auto;MARGIN-LEFT: auto;“ hinzuzufügen Es ist zu beachten, dass dies nicht empfohlen wird, wenn Sie diese Methode zum Zentrieren der gesamten Seite verwenden möchten Um in einem DIV festzulegen, können Sie mehrere Divs nacheinander aufteilen. Definieren Sie einfach MARGIN-RIGHT: auto;MARGIN-LEFT: auto in jedem geteilten Div.

3 Verschiedene Interpretationen des Box-Modells

#box{ width:600px; //for ie6.0- //for ff+ie6.0}
# box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 Double generiert durch Floating dh Distance

#box{ float:left; width:0 0 0 100px; //In diesem Fall generiert IE einen Abstand von 200px display:inline; //Ignorieren Sie den Float}
Lassen Sie uns im Detail über die beiden Elemente Block und Inline sprechen. Die Eigenschaften des Blockelements sind: Es beginnt immer in einer neuen Zeile und die Höhe, Breite, Zeilenhöhe und Ränder können alle gesteuert werden (Blockelemente); Die Eigenschaften des Inline-Elements sind: und Andere Elemente befinden sich in derselben Zeile, ... können nicht gesteuert werden (Inline-Elemente);

#box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren display:inline; //Das Gleiche erreichen Der Effekt der Zeilenanordnung diplay:table;

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich die normale Breite und Höhe, als ob es min wäre. Dies führt zu einem großen Problem.
Diese beiden Werte ändern sich in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Mindesthöhe verwenden, ist dies gleichbedeutend mit nicht Einstellen der Breite und Höhe unter IE hoch.
Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun:
#box{ width: 80px;}html>body #box{ width: auto; min-width: 35px; ;}

6 Mindestbreite der Seite

min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite des Elements nicht kleiner als eine bestimmte Breite sein darf Das Layout kann immer korrekt sein. Aber der IE erkennt dies nicht
und behandelt die Breite tatsächlich als die Mindestbreite. Damit dieser Befehl im IE funktioniert, können Sie ein

unter dem -Tag einfügen und dann eine Klasse für das div angeben:
Dann ist das CSS wie folgt gestaltet:
#container{ min-width : 600px; width:expression(document.body.clientWidth Die erste min-width ist normal; die Breite in Zeile 2 verwendet jedoch nur Javascript Nur der IE kann es erkennen, wodurch Ihr HTML-Dokument auch weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.

7 Floats löschen

.hackbox{ display:table; //Das Objekt als Tabelle auf Blockelementebene anzeigen} oder .hackbox{ clear:both;}
Oder hinzufügen: after (Pseudoobjekt), legt den Inhalt fest, der nach dem Objekt auftritt, und wird normalerweise in Verbindung mit Inhalten verwendet. IE unterstützt dieses Pseudoobjekt nicht, und Nicht-IE-Browser unterstützen es.
Es hat also keine Auswirkungen auf IE/WIN-Browser . Das Schwierigste daran... #box:after{ content: "."; display: block height: 0; clear: Both; strict;}

8 DIV float IE Der Text wird generiert ein 3-Pixel-Bug

Das linke Objekt schwebt, die rechte Seite wird mithilfe des linken Randes des äußeren Patches positioniert und der Text im rechten Objekt hat einen Abstand von 3 Pixeln vom linken

#box{ float :left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; Dieser Satz ist der Schlüssel}
HTML-Code

9 Attributauswahl (dies gilt nicht als kompatibel, es handelt sich um einen Fehler in verstecktes CSS)

p[id]{}div[id]{}
Dies ist für IE6.0 und niedrigere Versionen ausgeblendet und wird von FF und OPera verwendet
Es gibt immer noch einen Unterschied zwischen Attributselektor und Unterselektor, Unterselektor Der Umfang des Selektors ist in seiner Form eingeschränkt und der Umfang des Attributselektors ist relativ groß. Beispielsweise sind in p[id] alle p-Tags mit IDs gleich Stil.

10 IE-Versteckproblem

Wenn die Div-Anwendung komplex ist und in jeder Spalte einige Links vorhanden sind, tritt das Versteckproblem von DIV leicht auf diesmal.
Einige Inhalte können nicht angezeigt werden. Wenn die Maus diesen Bereich auswählt, wird festgestellt, dass sich der Inhalt tatsächlich auf der Seite befindet.
Lösung: Verwenden Sie das Attribut „line-height“ für #layout oder verwenden Sie feste Höhe und Breite für #layout. Halten Sie die Seitenstruktur so einfach wie möglich.

11 Nicht-Höhenanpassung

Nicht-Höhenanpassung bedeutet, dass, wenn sich die Höhe des Objekts der inneren Ebene ändert, die Höhe der äußeren Ebene nicht automatisch angepasst werden kann, insbesondere wenn es sich um das Objekt der inneren Ebene handelt verwendet
Marge oder Paddign-Stunde.
Beispiel:

Inhalt im p-Objekt

CSS: #box {background-color:#eee;}
# box p {margin-top: 20px; margin-bottom: 20px; text-align:center }
Lösung: Fügen Sie 2 leere div-Objekte über und unter dem P-Objekt hinzu. CSS-Code: .1{height:0px ;overflow: versteckt;} Oder fügen Sie das border-Attribut zum DIV hinzu.