Detaillierte Erläuterung von Kompatibilitätsproblemen in verschiedenen Browsern

Das sogenannte Browserkompatibilitätsproblem bezieht sich auf die Situation, in der verschiedene Browser denselben Code unterschiedlich analysieren, was zu inkonsistenten Seitenanzeigeeffekten führt. In den meisten Fällen besteht unsere Anforderung darin, dass unabhängig davon, welchen Browser der Benutzer zum Anzeigen unserer Website oder zum Anmelden bei unserem System verwendet, ein einheitlicher Anzeigeeffekt erzielt werden sollte. Daher sind Browserkompatibilitätsprobleme Probleme, auf die Front-End-Entwickler häufig stoßen und die gelöst werden müssen.

Bevor ich etwas über Browserkompatibilität lerne, möchte ich Frontend-Entwickler in zwei Kategorien einteilen:

Kategorie 1:

Sie sind Front-End-Entwickler, die genau nach den Konstruktionszeichnungen entwickeln, die auf 1 Pixel genau sein können. Sie können die Mängel der Konstruktionszeichnungen leicht finden und in seltenen Fällen auf Probleme mit der Browserkompatibilität stoßen Beseitigen Sie häufig Browserfehler, und die von ihnen erstellten Seiten sind in Zukunft leicht zu warten und weisen nur wenige Probleme bei der Codewiederverwendung auf. Man kann sagen, dass es sich um relativ stabilen und zuverlässigen Code handelt.

Die zweite Kategorie:

sind Frontend-Entwickler, die grundsätzlich nach den Konstruktionszeichnungen entwickeln. Viele Details sind sehr unterschiedlich, wie z. B. Abstände, Zeilenhöhe, Bildposition usw sind oft ein paar px unterschiedlich. Die Realisierung eines bestimmten Effekts wurde durch wiederholtes Debuggen erreicht. Die spezifischen Gründe für diesen Effekt sind noch unklar und das Gesamtlayout ist sehr fragil. Die kleinste Veränderung sorgt für Chaos. Ich weiß nicht, warum der Code so geschrieben ist. Solche Entwickler haben oft mit Kompatibilitätsproblemen zu kämpfen. Nachdem dieser Browser geändert wurde, hat er einen anderen Browser durcheinander gebracht. Ich habe es immer wieder geändert, ohne es zu ahnen. Tatsächlich sind die meisten Kompatibilitätsprobleme, auf die sie gestoßen sind, nicht auf den Browser, sondern auf die Technologie selbst zurückzuführen.

Dieser Artikel richtet sich hauptsächlich an ernsthafte Entwickler der ersten Kategorie. Daher analysieren wir hier hauptsächlich Kompatibilitätsprobleme aus der Perspektive der Browser-Parsing-Unterschiede.

Methoden/Schritte

Browserkompatibilitätsproblem 1: Verschiedene Browser haben unterschiedliche standardmäßige äußere Patches und innere Patches für Tags

Problemsymptome: Schreiben Sie einfach ein paar Tags ohne Stilkontrolle, und ihre jeweiligen Ränder und Abstände werden sehr unterschiedlich sein.

Begegnungshäufigkeit: 100 %

Lösung: CSS *{margin:0;padding:0;}

Hinweis: Dies ist die häufigste und einfachste Lösung für einen Browser Bei Kompatibilitätsproblemen verwenden fast alle CSS-Dateien am Anfang den Platzhalter *, um die internen und externen Patches jedes Tags auf 0 zu setzen.

Browserkompatibilitätsproblem 2: Nachdem das Blockattribut-Tag schwebt und horizontale Ränder vorhanden sind, ist der in IE6 angezeigte Rand größer als der eingestellte Wert

Problemsymptome: Was auch immer Schreiben Sie mehrere Tags, und ohne Stilkontrolle werden ihre jeweiligen Ränder und Abstände sehr unterschiedlich sein.

Begegnungshäufigkeit: 100 %

Lösung: CSS *{margin:0;padding:0;}

Hinweis: Dies ist die häufigste und einfachste Lösung für einen Browser Bei Kompatibilitätsproblemen verwenden fast alle CSS-Dateien am Anfang den Platzhalter *, um die internen und externen Patches jedes Tags auf 0 zu setzen.

Browserkompatibilitätsproblem 3: Legen Sie ein kleineres Höhen-Tag fest (im Allgemeinen weniger als 10 Pixel), und die Höhe überschreitet die Höhe, die Sie in IE6, IE7 und Yuyou festgelegt haben

Symptome des Problems: Die Höhe dieser Beschriftung in IE6, 7 und Ayouli ist unkontrolliert und überschreitet die von Ihnen festgelegte Höhe

Häufigkeit des Auftretens: 60 %

Lösung : Geben Sie dem Benutzer, der die Höhe überschreitet, die Bezeichnung auf overflow:hidden; oder stellen Sie die Zeilenhöhe so ein, dass sie kleiner als die von Ihnen festgelegte Höhe ist.

Hinweis: Diese Situation tritt normalerweise bei Etiketten auf, bei denen wir einen kleinen abgerundeten Hintergrund festlegen. Der Grund für dieses Problem liegt darin, dass Browser vor IE8 der Beschriftung eine minimale Standardzeilenhöhe zuweisen. Auch wenn Ihr Etikett leer ist, erreicht die Höhe des Etiketts immer noch die Standardzeilenhöhe.

Browserkompatibilitätsproblem 4: Inline-Attribut-Tags, Float-Layout wird nach dem Festlegen von display:block verwendet und es gibt horizontale Ränder, IE6-Abstandsfehler

Problemsymptom: Das Abstandsverhältnis in IE6 überschreitet den eingestellten Abstand

Auftrittswahrscheinlichkeit: 20 %

Lösung: Fügen Sie display:inline;display: nach display:block; hinzu.

Hinweis: Inline-Attribut-Tags: Um die Breite und Höhe festzulegen, müssen wir display:block; festlegen (mit Ausnahme des Eingabe-Tags, das etwas Besonderes ist). Nach der Verwendung des Float-Layouts und des horizontalen Rands tritt unter IE6 ein Fehler beim horizontalen Rand nach dem Blockattribut Float auf. Da es sich jedoch selbst um ein Inline-Attribut-Tag handelt, können Höhe und Breite nicht festgelegt werden, wenn wir display:inline hinzufügen. Zu diesem Zeitpunkt müssen wir auch display:talbe nach display:inline hinzufügen.

Browserkompatibilitätsproblem 5: Bilder haben standardmäßig Abstände

Problemsymptom: Wenn mehrere IMG-Tags zusammengefügt werden, treten bei einigen Browsern Abstände auf einen Standardabstand und das Hinzufügen des in Frage 1 erwähnten Platzhalters wird nicht funktionieren.

Trefferwahrscheinlichkeit: 20 %

Lösung: Float-Attribut zum Layout von img verwenden

Hinweis: Da das img-Tag ein Inline-Attribut-Tag ist, solange dies nicht der Fall ist die Breite des Containers überschreiten, werden die IMG-Tags alle in einer Zeile angeordnet, in einigen Browsern entsteht jedoch eine Lücke zwischen den IMG-Tags. Das Entfernen dieses Abstands und die Verwendung von Float ist der richtige Weg. (Einer meiner Schüler verwendet einen negativen Rand. Obwohl es gelöst werden kann, ist der negative Rand selbst eine Verwendung, die leicht zu Browserkompatibilitätsproblemen führen kann, daher verbiete ich ihre Verwendung)

Browserkompatibilitätsproblem 6: Das Festlegen von min-height für die Mindesthöhe des Etiketts ist inkompatibel

Problemsymptom: Da min-height selbst eine inkompatible CSS-Eigenschaft ist, ist das Festlegen von min - Höhe ist mit verschiedenen Browsern nicht gut kompatibel

Auftrittswahrscheinlichkeit: 5 %

Lösung: Wenn wir die Mindesthöhe eines Etiketts auf 200 Pixel festlegen möchten, müssen die Einstellungen vorgenommen werden sind: { min-height:200px; height:auto !important; height:visible;}

Hinweis: Beim Öffnen des Frontends des B/S-Systems gibt es viele Situationen, in denen wir brauchen das. Wenn der Inhalt kleiner als ein Wert ist (z. B. 300 Pixel). Die Höhe des Containers beträgt 300 Pixel. Wenn die Inhaltshöhe diesen Wert überschreitet, wird die Höhe des Containers erhöht, anstatt dass Bildlaufleisten angezeigt werden. Zu diesem Zeitpunkt werden wir mit diesem Kompatibilitätsproblem konfrontiert sein.

Browserkompatibilitätsproblem 7: Kompatible CSS-Einstellungen für Transparenz

Die Methode zum Erstellen einer kompatiblen Seite ist: Schreiben Sie einen kleinen Codeabschnitt (eine Zeile oder einen Block in der Layout) jedes Mal müssen wir überprüfen, ob es in verschiedenen Browsern kompatibel ist. Wenn Sie über ein bestimmtes Niveau verfügen, wird es natürlich nicht so problematisch sein. Empfohlen für Einsteiger, die häufig auf Kompatibilitätsprobleme stoßen. Viele Kompatibilitätsprobleme werden dadurch verursacht, dass Browser die Standardattribute von Tags unterschiedlich analysieren. Diese Kompatibilitätsprobleme können leicht mit ein paar Einstellungen gelöst werden. Wenn wir mit den Standardattributen von Tags vertraut sind, können wir besser verstehen, warum Kompatibilitätsprobleme auftreten und wie wir sie lösen können.

/* CSS-Hack*/

Ich benutze selten Hacker, vielleicht ist es eine persönliche Angewohnheit, dass ich nicht gerne Code schreibe, der mit dem IE nicht kompatibel ist, und dann Hacks verwende, um ihn zu lösen. Aber Hacker ist immer noch sehr einfach zu bedienen. Mithilfe von Hackern kann ich Browser in drei Kategorien einteilen: IE6; IE7 und Aoyou; andere (IE8 Chrome ff Safari Opera usw.)

◆Die Hacker, die IE6 erkennt, sind Unterstriche_ und Sternchen*

◆Der Hacker IE7 kennt Sternchen*

Zum Beispiel ist dies eine CSS-Einstellung:

height:300px;*height:200px;_height:100px; Durchsuchen Wenn der Browser „height: 300px“ liest, geht er davon aus, dass die Höhe 300px beträgt. Lesen Sie weiter, er kennt auch *heihgt. Wenn IE6 also *height: 200px liest, überschreibt er die widersprüchliche Einstellung der vorherigen und geht davon aus, dass die Höhe beträgt 200px. Lesen Sie weiter, IE6 kennt auch _height, überschreibt also die 200px-Höheneinstellung und setzt die Höhe auf 100px.

IE7 und Aoyou lesen auch von der 300px-Höheneinstellung herunter. Sie hören auf, wenn sie *height200px lesen, weil sie _height nicht kennen. Sie analysieren also die Höhe auf 200 Pixel, und die übrigen Browser kennen nur die erste Höhe: 300 Pixel, sodass sie die Höhe auf 300 Pixel analysieren. Da das Festlegen von Eigenschaften mit derselben Priorität und demselben Konflikt die vorherige überschreibt, ist die Reihenfolge des Schreibens sehr wichtig.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Kompatibilitätsproblemen in verschiedenen Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!