Lösen Sie das Problem der CSS-Inkompatibilität in Browsern

Jeder muss die Inkompatibilität von Browsern hassen. Oft beheben wir sie einfach, vergessen aber das Wichtigere, nämlich die Ursache herauszufinden und zu verhindern, dass ähnliche Inkompatibilitäten erneut auftreten.

Ich möchte einige HTML-Codierungselemente zusammenfassen und hoffe, Ihnen eine Orientierung zu geben:
1. Die Größe des Textes selbst ist nicht kompatibel. Der gleiche Song-Stil-Text mit der Schriftgröße: 14px nimmt in verschiedenen Browsern unterschiedlichen Platz ein. Unter IE nimmt er tatsächlich 16px in der Höhe und 3px am unteren Rand ein, in FF tatsächlich 17px in der Höhe und 1px am oberen Rand 1px unten. Weiß 3px, unter Oper wird es noch anders sein. Lösung: Zeilenhöhe für Text festlegen. Stellen Sie sicher, dass der gesamte Text über einen Standardwert für die Zeilenhöhe verfügt. Das ist wichtig, wir können einen Höhenunterschied von 1 Pixel nicht tolerieren.

2. Die Containerhöhe ist unter ff begrenzt, das heißt, die Form des Containerrandes wird durch den Inhalt bestimmt um den Inhalt erweitert werden und die Höhenbeschränkung ungültig wird. Definieren Sie also nicht einfach die Höhe des Behälters.

3. Besprochen wurde auch das Problem, dass der Inhalt den Container horizontal zerbricht. Wenn der Float-Container keine definierte Breite hat, dehnt der Inhalt unter ff die Breite des Containers so weit wie möglich aus, und unter ie wird dem Inhaltsumbruch Priorität eingeräumt. Deshalb müssen schwebende Container, deren Inhalt platzen könnte, eine Breite definieren.

Kleines Experiment: Wenn Sie Interesse haben, können Sie sich dieses Experiment ansehen. Testen Sie jeden der folgenden Codes in verschiedenen Browsern.


a.

b.

c.

1px solid red;overflow:hidden“>

Der obige Code ist in verschiedenen Browsern unterschiedlich. Das Experiment entstand durch die Verwendung eines kleinen Höhenwerts p,

, kleine Höhenwerte sollten zusammen mit overflow:hidden verwendet werden. Das Experiment dient nur zum Spaß. Ich möchte darauf hinweisen, dass Browser Containergrenzen sehr unterschiedlich interpretieren und die Auswirkungen von Containerinhalten unterschiedlich sind.

4. Floats löschen ist unter ff nicht möglich.

Um das Missverständnis aller zu korrigieren: Es ist falsch zu sagen, dass ff schlecht ist, wenn wir auf Inkompatibilität stoßen. Tatsächlich ist es häufiger das seltsame Verhalten von ie, das uns ratlos macht. Im Folgenden sind die verschiedenen Missetaten von ie6 aufgeführt.

5. Der am meisten gehasste Bug mit doppelter Marge. Definieren Sie margin-left oder margin-right für einen Floating-Container unter IE6. Der tatsächliche Effekt ist doppelt so hoch. Die Lösung besteht darin, display:inline für den Floating-Container zu definieren.

6.mirrormargin-Fehler: Wenn das äußere Element ein Float-Element enthält und das äußere Element margin-top:14px definiert, wird automatisch margin-bottom:14px generiert. Ähnliche Probleme treten auch beim Auffüllen auf, was alles eine Spezialität von IE6 ist. Die Situationen, in denen diese Art von Fehler auftritt, sind weit mehr als nur diese Art von Auftretensbedingung und wurden nicht systematisch gelöst. Lösung: Legen Sie einen Rand oder einen Float für das äußere Element fest.

Erweiterung: Die Erklärungen zu margin-bottom und padding-bottom von Containern unter ff und ie sind manchmal inkonsistent, was damit zusammenzuhängen scheint.

7. Aus Platzgründen werde ich nicht näher auf das Phänomen des Schluckens eingehen. Es ist immer noch IE6, es gibt zwei ps nach oben und unten, aber es wurde festgestellt, dass das untere p, das keinen Hintergrund hat, auch einen Hintergrund hat. Dies ist das Phänomen des Verschluckens. Entsprechend dem oben beschriebenen Phänomen des Verschluckens des Hintergrunds gibt es auch das Phänomen fehlender Ränder beim Scrollen. Lösung: Zoom verwenden:1. Dieser Zoom scheint speziell für die Behebung von ie6-Fehlern konzipiert zu sein.

8. Kommentare können auch Fehler verursachen~~~ „Ein zusätzliches Schwein.“ Dies ist die Kopie, die von früheren Leuten verwendet wurde, um diesen Fehler in IE6 zusammenzufassen . Erscheint zweimal, die Menge des wiederholten Inhalts variiert je nach Anzahl der Kommentare. Lösung: Verwenden Sie die Methode „ picRotate start “, um Kommentare zu schreiben.

9.

Riga float

, das ist ein typisches und schwieriges Kompatibilitätsproblem. Ich hoffe, dass jeder darauf achtet. Verschiedene Attribute von li werden unterschiedliche Auswirkungen haben . Die Erklärung unter ff ist einigermaßen verständlich, aber die Erklärung unter ie6 wird Sie verwirren. Aufgrund der Komplexität des Problems wird dieser Frage ein eigener Artikel gewidmet. Im Artikel „UL-Nutzungserfahrungen“ gibt es relevante Ergebnisse, der Lösungsprozess des Problems wird jedoch nicht angegeben.

10. Das seltsame Verhalten von ul bei der Verwendung von „float:left;display:inline“. Es ist ersichtlich, dass dieses CSS als Reaktion auf den Double-Margin-Fehler unter ie6 hinzugefügt wurde. Dies ist auch ein wichtiger Teil meines CSS-Systems. Es wird im Artikel „Using Experience of ul“ erläutert. Und dieses CSS wird Sie unglücklich machen, wenn es auf ul verwendet wird. Das war's vorerst, viel mehr kann ich hier nicht sagen.

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem der CSS-Inkompatibilität in Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!