Unterschiede in den CSS-Stylesheets zwischen den Browsern Firefox und IE

1 CSS-Stil für Firefox ie6 IE7

Die meisten von ihnen werden jetzt mit !important gehackt. Für ie6- und Firefox-Tests kann es normal angezeigt werden, aber ie7 kann !important korrekt interpretieren, was dazu führt Seite zum Scheitern bringen. Ich habe einen guten Hack für IE7 gefunden, der darin besteht, „*+Html“ zu verwenden. Jetzt sollte es mit IE7 durchsucht werden, 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 als #333 unter Firefox, #666 unter IE6 und #666 unter IE7 angezeigt Die Schriftfarbe wird 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; }

Definieren Sie zuerst TEXT-ALIGN: center im übergeordneten Element Diese Einstellung reicht aus.

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.

Beachten Sie, dass dies der Fall ist, wenn Sie diese Methode zum Zentrieren der gesamten Seite verwenden möchten Es wird empfohlen, es nicht in ein DIV einzuschließen. Sie können mehrere Divs nacheinander aufteilen, solange Sie MARGIN-RIGHT: auto;MARGIN-LEFT: auto in jedem geteilten Div definieren.

3 Verschiedene Interpretationen des Box-Modells.

#box{

width:600px;

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

4 Doppelter Abstand, erzeugt durch Floating ie

#box{ float:left; width:0 0 0 100px; In diesem Fall generiert IE einen Abstand von 200 Pixeln. display:inline; // Die schwebenden Elemente ignorieren🎜>

Hier sind die beiden Elemente block und inline, Block Die Eigenschaften des Elements sind: Es beginnt immer auf a Neue Zeile, Höhe, Breite, Zeilenhöhe und Ränder können alle gesteuert werden (Blockelemente); die Eigenschaften des Inline-Elements sind: Es befindet sich in derselben Zeile wie andere Elemente, ... kann nicht gesteuert werden (Inline-Elemente). );

#box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren display:inline; //Erzielen Sie den Effekt, dass sie in derselben Zeile angeordnet sind diplay:table;

5 Probleme mit IE und Breite und Höhe

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe so, als ob es min 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;}html>body #box{ width: auto; height: 35px;}

6 Die Mindestbreite der Seite

min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass das Element mindestens eine bestimmte Breite haben muss Das Layout kann immer korrekt sein. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Damit dieser Befehl im IE funktioniert, können Sie ein