Eine kurze Zusammenfassung der IE- und FF-Kompatibilitätsprobleme im CSS-Webseitenlayout

Es gibt oft viele Inkompatibilitätsprobleme zwischen IE und FF im CSS-Webseitenlayout. Hier sind einige gängige Möglichkeiten und ihre Lösungen!

1. Verwenden Sie !important, um die Layoutunterschiede zwischen IE und Mozilla zu beheben

!important ist eine in CSS1 definierte Syntax. Ihre Funktion besteht darin, die Anwendungspriorität bestimmter Stilregeln zu erhöhen. Der wichtigste Punkt ist, dass IE diese Syntax nie unterstützt hat, andere Browser jedoch. Daher können wir dies verwenden, um verschiedene Stile für IE und andere Browser zu definieren. Wir definieren beispielsweise einen Stil wie diesen:


Beim Surfen in Mozilla kann es die Priorität von !important verstehen, daher wird die Farbe #60A179 angezeigt. Beim Surfen im IE kann es die Priorität von !important nicht verstehen, daher wird die Farbe #00F angezeigt.

2. Lösen Sie das Problem, dass der Hover-Stil nach dem Zugriff auf den Hyperlink nicht angezeigt wird.

Ändern Sie die Reihenfolge der CSS-Eigenschaften: Der Reihenfolgestandard sollte sein:
a:link – a:visited – a:hover – a:active

3. So zeigen Sie den Inhalt in Li mit Ellipsen an, nachdem er die Länge überschritten hat


4. Margin und Padding sind Abkürzungen für die Definition von Abmessungen.

margin:3px – bedeutet, dass alle Seiten 3px groß sind;
margin:3px 5px – bedeutet, dass der Wert von oben und unten 3 Pixel und der Wert von rechts und links 5 Pixel beträgt
margin:3px 5px 7px – zeigt an, dass der Wert von oben 3, der Wert von rechts und links 5 und der Wert von unten 7 beträgt
Rand: 3px 5px 7px 5px – die vier Werte stehen für oben, rechts, unten, links; oben, rechts, unten und links.

5. Lösen Sie das Problem, dass der IE transparentes PNG nicht korrekt anzeigen kann – fügen Sie Code in den Header ein


6. ul verhält sich unter Firefox und IE unterschiedlich

Verwenden Sie (padding:0; margin:0; list-style:inside;)
Oder (padding:0; margin:0; list-style:none;), um Kompatibilität zu erreichen

7. Lösung für den 2px-Unterschied bei der Interpretation des BOX-Modells in Firefox und IE


Beachten Sie, dass die Reihenfolge dieser beiden Ränder nicht umgekehrt werden darf. Laut oben genanntem IE wird !important nicht unterstützt, daher wird es im IE tatsächlich so interpretiert:


Bei wiederholten Definitionen wird die letzte ausgeführt, Sie können also nicht einfach margin:XXpx!important; schreiben.

8. Standardeffekt der Marge

Der Inhalt im div ist im IE standardmäßig zentriert und in FF standardmäßig linksbündig ausgerichtet. Um den ff-Inhalt zu zentrieren, fügen Sie den Code margin:auto;