Tipps zur CSS-Kompatibilität (IE und Firefox).

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