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
Inhalt im p-Objekt
