Analyse der wichtigsten Punkte der CSS-Kompatibilität_Erfahrungsaustausch

IE vs FF

CSS-Kompatibilitätspunkte:

DOCTYPE wirkt sich auf die CSS-Verarbeitung aus

FF: div ist bereits zentriert, wenn margin-left und margin-right auf auto eingestellt sind, aber IE funktioniert nicht

FF: Beim Festlegen der Textausrichtung am Körper muss das Div margin: auto (hauptsächlich margin-left, margin-right) festlegen, um zentriert zu sein

FF: After Wenn Sie die Auffüllung festlegen, erhöht das Div die Höhe und Breite, aber der IE weiß es nicht, also müssen Sie !important verwenden, um eine zusätzliche Höhe und Breite festzulegen

FF: unterstützt !important, aber der IE ignoriert es, Sie kann !important verwenden, um den Stil von

div speziell für FF-Vertikalzentrierungsprobleme festzulegen: Vertical-align:middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie die gesamte DIV-Zeilenhöhe:200px. Fügen Sie dann Text ein und es wird vertikal zentriert sein. Der Nachteil besteht darin, dass Sie den Inhalt steuern müssen, ohne ihn umzubrechen

Cursor: Der Zeiger kann gleichzeitig die Form des Cursorfingers in IE FF anzeigen, die Hand kann nur in IE verwendet werden

FF: Links fügen Rahmen und Hintergrundfarben hinzu. Sie müssen display: block und float: left festlegen, um sicherzustellen, dass keine Zeilenumbrüche auftreten. Bezogen auf die Menüleiste dient das Festlegen der Höhe von a und der Menüleiste dazu, eine Verschiebung der unteren Randanzeige zu vermeiden. Wenn die Höhe nicht festgelegt ist, können Sie in der Menüleiste ein Leerzeichen einfügen.

Dort Die Verwendung der XHTML+CSS-Architektur bietet viele Vorteile, aber es gibt tatsächlich einige Probleme, sei es aufgrund ungeschickter Verwendung oder unklarem Denken. Ich werde einige der Probleme, auf die ich gestoßen bin, unten aufschreiben, um allen die Suche zu ersparen^^

1. In Mozilla führt die inkonsistente Interpretation des BOX-Modells in Firefox und IE zu einem Unterschied von 2 Pixel:

div{margin:30px!important;margin:28px;}

Beachten Sie, dass die Reihenfolge dieser beiden Ränder nicht geschrieben werden darf. Im Gegenteil, laut Ajie wird das !important-Attribut vom IE nicht erkannt, andere Browser jedoch. Unter IE wird es also tatsächlich so interpretiert:

div{maring:30px;margin:28px}

Wenn Sie die Definition wiederholen, wird sie gemäß der letzten ausgeführt, also Sie nicht einfach margin:XXpx!important schreiben

2 Die BOX-Interpretation von IE5 und IE6 ist inkonsistent. Die Breite von div{width:300px;margin:0 10px 0 10px;} wird unter IE5 interpretiert 300px-10px (rechter Abstand) -10px (linker Abstand) Die endgültige Breite des Div beträgt 280px, und in IE6 und anderen Browsern wird die Breite als 300px + 10px (rechter Abstand) + 10px (linker Abstand) = 320px berechnet. Zu diesem Zeitpunkt können wir die folgenden Änderungen vornehmen:

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

, darüber/**/ Ich verstehe nicht ganz, was es ist. Ich weiß nur, dass IE5 und Firefox unterstützt werden es, aber IE6 nicht, bitte lassen Sie es mich wissen, danke! :)

3.ul-Tag hat in Mozilla standardmäßig einen Padding-Wert, aber im IE hat nur margin einen Wert, also definieren Sie

ul{margin:0;padding:0;} zuerst

kann die meisten Probleme lösen

4. In Bezug auf Skripte wird das Sprachattribut in xhtml1.1 nicht unterstützt. Sie müssen nur den Code in

<script> <BR> ändern</script>