Die Kompatibilität von CSS mit Browsern bereitet den Leuten manchmal Kopfschmerzen. Wenn Sie die Techniken und Prinzipien verstehen, wird es vielleicht nicht schwierig sein, die Kompatibilitätstipps für IE7, 6 und Fireofx aus dem Internet zu sammeln. Versuchen Sie für den Übergang zu web2.0, Code im xhtml-Format zu schreiben. DOCTYPE wirkt sich auf die CSS-Verarbeitung aus. Als W3C-Standard muss eine DOCTYPE-Anweisung hinzugefügt werden.
CSS-Tipps
1. Vertikales Zentrierungsproblem von div
Vertical-Align:Middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie die gesamte DIV-Zeilenhöhe:200px. Fügen Sie dann den Text ein und er wird vertikal zentriert. Der Nachteil besteht darin, dass Sie den Inhalt kontrollieren müssen und ihn nicht in eine andere Zeile einschließen dürfen.
2. Das Problem der Margenverdopplung
Der für ein auf Float eingestellte Div festgelegte Spielraum wird unter IE verdoppelt. Dies ist ein Fehler, der in ie6 vorhanden ist. Die Lösung besteht darin, display:inline; in dieses Div einzufügen.
Zum Beispiel:
<#div id=”imfloat”>
Das entsprechende CSS ist
#imfloat{
float:left;
margin:5px;/*Unter IE wird es als 10px verstanden*/
display:inline;/*Unter IE wird es als 5px verstanden*/}
3. Doppelte Distanz, die durch Schweben erzeugt wird, d. h
#box{ float:left; width:100px; margin:0 0 0 100px //In diesem Fall generiert IE einen Abstand von 200px display:inline;
Lassen Sie uns im Detail über die beiden Elemente Block und Inline sprechen: Das Merkmal des Blockelements besteht darin, dass es immer in einer neuen Zeile beginnt und Höhe, Breite, Zeilenhöhe und Ränder alle gesteuert werden können (Blockelement). des Inline-Elements ist das, und andere Die Elemente befinden sich in derselben Zeile und können nicht gesteuert werden (Inline-Elemente);
#box{ display:block; //Sie können Inline-Elemente als Blockelemente simulieren display:inline; //Erzielen Sie den Effekt der Anordnung in derselben Zeile diplay:table;
4 IE-Probleme mit Breite und Höhe
IE erkennt die Definition von min- nicht, behandelt aber tatsächlich die normale Breite und Höhe so, als ob es ein Minimum gäbe. Dies ist ein großes Problem. Wenn Sie nur Breite und Höhe verwenden, ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Höhe verwenden, werden Breite und Höhe überhaupt nicht festgelegt unter IE.
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; height: 35px;}html>body { width: auto; min-width: 35px;}
5. Mindestseitenbreite
min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite eines Elements nicht kleiner als eine bestimmte Breite sein darf, sodass das Layout immer korrekt ist. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Um diesen Befehl auch im IE verfügbar zu machen, können Sie ein <div> unter dem <body>-Tag einfügen, dann eine Klasse für das div angeben und dann das CSS wie folgt entwerfen:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
Die erste Mindestbreite ist normal; die Breite in der zweiten Zeile verwendet jedoch Javascript, das nur vom IE erkannt wird, wodurch Ihr HTML-Dokument ebenfalls weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.