Besprechen Sie Probleme mit der Browserkompatibilität und sprechen Sie über häufige CSS-Fehler (Zusammenfassung)

In diesem Kapitel besprechen wir Probleme mit der Browserkompatibilität und sprechen über häufige CSS-Fehler. Ich hoffe, dass es für Sie hilfreich ist.

1. Gängige Mainstream-Browser

1 🎜> Internet Explorer, Safari, Mozilla Firefox, Google Chrome, Opera, Baidu, 360, Sogou, Maxthon

Der früheste Browser:

Mosaik / Netscape Navigator (1994-2008), abgekürzt als NN

2. Fünf Hauptbrowserkerne Trident (MSHTML) (Trident; Trident Linie; dreizackige Harpune)

Gecko (Gecko)

Presto (rapid)
Webkit (Safari-Kernel, Chrome-Kernel-Prototyp, es ist Apples eigener Kernel und auch Apples Kernel, der vom Safari-Browser verwendet wird)
Blink (eine von Google und Opera Software entwickelte Browser-Layout-Engine).

3. Repräsentative Werke der fünf wichtigsten Browserkerne*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser

Das repräsentative Werk ist IE. Da IE mit Windows gebündelt ist, wird es auch als IE-Kernel oder MSHTML bezeichnet. Dieser Kernel kann nur auf die Windows-Plattform angewendet werden und ist nicht Open Source.

*Gecko: Das repräsentative Werk Mozilla Firefox ist Open Source. Sein größter Vorteil ist, dass es plattformübergreifend ist und auf den wichtigsten Betriebssystemen wie Microsoft Windows, Linux und MacOS X laufen kann.

*Webkit: Repräsentative Werke von Safari und Chrome sind ein Open-Source-Projekt.

*Presto: Repräsentatives Werk Opera, Presto ist eine von Opera Software entwickelte Browser-Layout-Engine. Es gilt auch als die schnellste Rendering-Engine der Welt.

*Blink: Browser-Layout-Engine, entwickelt von Google und Opera Software, veröffentlicht im April 2013.

4. Warum treten Browserkompatibilitätsprobleme auf? Da die wichtigsten Mainstream-Browser von verschiedenen Herstellern entwickelt werden, ist es auch schwierig, die Kernarchitektur und den verwendeten Code neu zu kombinieren, was Möglichkeiten für verschiedene unerklärliche Fehler (Codefehler) bietet. In Verbindung mit den verschiedenen technischen Hürden, die große Hersteller aus Rücksicht auf ihre eigenen Interessen errichten, ist die Anwendung von CSS schwieriger als gedacht. Probleme mit der Browserkompatibilität müssen wir überwinden.

CSS-Fehler, CSS-Hack und Filter

1. CSS-Fehler:

Das Problem der inkonsistenten Analyse von CSS-Stilen in verschiedenen Browsern oder das Problem, dass CSS-Stile in Browsern nicht korrekt angezeigt werden können, wird als CSS-Fehler bezeichnet

2 In CSS bezieht sich Hack auf eine Technik, die mit der korrekten Darstellung von CSS in verschiedenen Browsern kompatibel ist, da es sich bei allen um inoffizielle persönliche Änderungen am CSS-Code oder inoffizielle Patches handelt. Manche Leute bevorzugen die Verwendung von „Patch“, um dieses Verhalten zu beschreiben.

3. Filter:
bedeutet Filter, eine Möglichkeit, Regeln oder Anweisungen für einen bestimmten Browser oder eine bestimmte Browsergruppe anzuzeigen oder auszublenden. Im Wesentlichen ist Filter eine Art Hack, der zum Filtern verschiedener Browser verwendet wird.

5. Einige Nebenwirkungen der Verwendung von Hack

Reduziert die Lesbarkeit von CSS-Code und erhöht die Codelast.

Normalerweise gibt es zwei Methoden zum Entwerfen von CSS-Hacks und -Filtern:

1) Eine besteht darin, den Browser-eigenen Fehler zu nutzen, um Stile oder Deklarationen auszublenden oder anzuzeigen 2) Die andere besteht darin, die unvollständige CSS-Unterstützung des Browsers auszunutzen, z. B. die mangelnde Unterstützung bestimmter Regeln oder Syntax, um Stile auszublenden oder anzuzeigen.

6. Häufige CSS-Fehler

1. Bilder haben Rahmenfehler Wenn ein Bild zum IE hinzugefügt wird, erscheint ein Hack: Rand hinzufügen:0; oder Rand:0, keiner;

Bildlücke BUG in div

Beschreibung: Beim Einfügen eines Bildes in ein Div vergrößert das Bild den unteren Rand des Div um etwa drei Pixel.
Hack1: Schreiben Sie und in eine Zeile; Hack2: In Blockelement konvertieren, Anweisung hinzufügen: display:block;

dt, Bildlücke in li

Hack: In Blockelement konvertieren, Anweisung hinzufügen: display:block;

3. Double Float (doppelter Rand) (erscheint nur in IE6)
Beschreibung: Wenn Ie6 und niedrigere Browser schwebende Elemente analysieren, verdoppeln sie fälschlicherweise den schwebenden Rand.
Hack: Fügen Sie eine Deklaration zum schwebenden Element hinzu: display:inline;

Standardhöhe (IE6, IE7)
Beschreibung: In IE6 und niedriger haben einige Blockelemente eine Standardhöhe (ca. 16 Pixel;)

Hack1: Fügen Sie dem Element eine Deklaration hinzu: font-size:0;

Hack2: Fügen Sie dem Element eine Anweisung hinzu: overflow:hidden;

5. Die Zeilenhöhenausrichtung von Formularelementen ist inkonsistent
Beschreibung: Die Zeilenhöhenausrichtung von Formularelementen ist inkonsistent
Hack: Fügen Sie dem Formularelement eine Anweisung hinzu: float:left;

6. Die Standardgrößen der Schaltflächenelemente sind unterschiedlich
Beschreibung: Die Größe der Schaltflächenelemente in verschiedenen Browsern ist inkonsistent
Hack1: Einheitliche Größe/(mit einer Markierung simuliert)
Hack2: Platzieren Sie eine Beschriftung außerhalb der Eingabe, schreiben Sie den Schaltflächenstil in diese Beschriftung und entfernen Sie den Rand der Eingabe.
Hack3: Wenn es sich bei der Schaltfläche um ein Bild handelt, verwenden Sie das Bild einfach als Hintergrundbild der Schaltfläche.

7. Prozentsatz der Fehler
Beschreibung: Beim Parsen des Prozentsatzes in IE6 und niedriger wird er durch Rundung berechnet, was zu einer Situation führt, in der 50 % plus 50 % größer als 100 % ist. (Es wird auch vom System beeinflusst)
Hack: Fügen Sie dem Floating-Element auf der rechten Seite eine Deklaration hinzu:
clear:right; Bedeutung: Löschen Sie das rechte Float.
clear:left: den linken Float löschen
clear:both: den Float auf beiden Seiten löschen

Mauszeigerfehler
Beschreibung: Der Handattributwert des Cursorattributs wird nur von Browsern unter IE9 erkannt. Andere Browser erkennen diese Anweisung nicht. Der Zeigerattributwert des Cursorattributs wird von IE6.0 oder höher und anderen Kernelbrowsern erkannt.
Hack: Wenn Sie die Mauszeigerform eines Elements in eine Handform vereinheitlichen,
Die Deklaration sollte hinzugefügt werden: Cursor:Zeiger

9. Transparentes Attribut
Kompatibel mit anderen Browsern. Schreibmethode: opacity:value; (der Wertebereich von value ist 0-1; Beispiel: opacity:0.5; )
IE-Browser-Schreibmethode: filter:alpha(opacity=value); Wertebereich 1-100 (Ganzzahl)

BUG in li list
1): Ein vertikaler Fehler tritt auf, wenn das übergeordnete Element (li) float:left hat; das untergeordnete Element (a) setzt float nicht; setze float sowohl für das übergeordnete Element li als auch für das untergeordnete Element a; 2): Beim Konvertieren von a in li in block; und wenn float nicht in li festgelegt ist, wird eine Leiteranzeige angezeigt: Fügen Sie gleichzeitig float zu li hinzu . Rand nach oben und unten überlappen
Beschreibung: Wenn für das aktuelle Element (das erste untergeordnete Element im übergeordneten Element) und das übergeordnete Element keine Gleitkommazahlen festgelegt sind, wird nach dem Festlegen von „margin-top“ „margin-top“ hinzugefügt übergeordnetes Element versehentlich

CSS-Hack:

1. Overflow:hidden; zum übergeordneten Element hinzufügen (empfohlen)
2. Fügen Sie Floating

zum übergeordneten Element oder untergeordneten Element hinzu. 12. margin BUG
Wenn zwei Elemente übereinander angeordnet sind, hat das obere Element den Rand unten: 30 Pixel; der Abstand zwischen ihnen wird nicht überlappt, sondern auf einen größeren Wert eingestellt;

Das obige ist der detaillierte Inhalt vonBesprechen Sie Probleme mit der Browserkompatibilität und sprechen Sie über häufige CSS-Fehler (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!