Tipps zur Lösung der Browserkompatibilität

Wenn wir Front-End-Webseiten entwickeln und den CSS-Stil der Seite schreiben, müssen wir häufig die Kompatibilitätsprobleme verschiedener Browser berücksichtigen, damit die von uns entworfenen und entwickelten Front-End-Seiten normal auf verschiedenen Browsern angezeigt werden können Browser. In diesem Kapitel geben wir Ihnen einige Tipps zur Lösung der Browserkompatibilität, die für Freunde in Not hilfreich sein können.

1. Unter Chrome werden Textschriftarten, die kleiner als 12 Pixel sind, standardmäßig als 12 Pixel angezeigt, sodass Chrome Schriftarten unterstützt, die kleiner als 12 Pixel sind

box{ font-size: 8px; -webkit-text-size-adjust: none;}

Die oben beschriebene Methode wird in Zukunft in chrome27 verfügbar sein. Es kann nicht mehr verwendet werden. Aber wir können CSS3 verwenden, um dieses Problem zu lösen

box{ font-size: 12px; -webkit-transform: scale(0.75);}

2. Die standardmäßigen äußeren Patches und inneren Patches von Tags in verschiedenen Browsern sind unterschiedlich. Schreiben Sie einfach ein paar Tags, ohne eine Stilkontrolle hinzuzufügen Unterschied zwischen Rand und Polsterung. Häufigkeit des Auftretens: 100 %

Lösung:

* {margin:0;padding:0;}

Hinweis: Dies ist das häufigste und am einfachsten zu lösende Browserkompatibilitätsproblem, das bei fast allen CSS-Dateien der Fall ist Verwenden Sie am Anfang Platzhalter, um die internen und externen Patches jedes Labels auf 0 zu setzen.

3. Stellen Sie eine kleinere Höhenbeschriftung ein (im Allgemeinen weniger als 10 Pixel, die Höhe überschreitet die von Ihnen festgelegte Höhe

Problemsymptome: ie6, 7 und Die Höhe dieses Etiketts in Aoyouli ist unkontrolliert und überschreitet die von Ihnen festgelegte Höhe

Begegnungshäufigkeit: 60 %

Lösung: Überlauf festlegen: ausgeblendet für Etiketten, die die Höhe überschreiten ; oder Stellen Sie die Zeilenhöhe auf einen geringeren Wert als die von Ihnen festgelegte Höhe ein.

Hinweis: Diese Situation tritt normalerweise bei Etiketten auf, bei denen wir einen kleinen Hintergrund mit abgerundeten Ecken 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.

4. Bilder haben standardmäßig Abstände

Symptome des Problems: Wenn mehrere IMG-Tags zusammengefügt werden, haben einige Browser Standardabstände, plus Problem 1 Die genannten Platzhalter in auch nicht funktionieren.

Trefferwahrscheinlichkeit: 20 %

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

Hinweis: Da es sich beim img-Tag um ein Inline-Attribut-Tag handelt, Solange es die Breite des Containers nicht überschreitet, werden die IMG-Tags in einer Reihe angeordnet, bei einigen Browsern besteht jedoch eine Lücke zwischen den IMG-Tags. Das Entfernen dieses Abstands und die Verwendung von Float ist der richtige Weg

5. Die Mindesthöheneinstellung des Etiketts, min-height, ist nicht kompatibel

Problemsymptome: Da die Mindesthöhe selbst eine Inkompatibilität mit kompatiblen CSS-Attributen darstellt, ist das Festlegen der Mindesthöhe mit verschiedenen Browsern nicht gut kompatibel.

Wahrscheinlichkeit des Auftretens: 5 %

Lösung: Wenn wir die festlegen möchten Mindesthöhe eines Etiketts 200 Pixel, die erforderlichen Einstellungen sind:

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

Hinweis: Beim Öffnen des Frontends des B/S-Systems gibt es viele Situationen, in denen wir diese Anforderung haben. 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 eine Bildlaufleiste angezeigt wird. Zu diesem Zeitpunkt werden wir mit diesem Kompatibilitätsproblem konfrontiert sein.

6. Const-Problem

Hinweis: Unter Firefox können Sie das Schlüsselwort const oder das Schlüsselwort var verwenden, um Konstanten zu definieren; IE Unten können Sie nur das Schlüsselwort var verwenden, um Konstanten zu definieren.

Lösung: Verwenden Sie das Schlüsselwort var einheitlich, um Konstanten zu definieren.

7. location .href-Problem

Erklärung: Unter IE oder Firefox2.0.x können Sie window.location oder window.location.href verwenden;

Unter Firefox1.5 .x können Sie nur window.location verwenden.

Lösung: Verwenden Sie window.location anstelle von window.location.href.

8 ol-Listen Einrückungsproblem

Beim Entfernen der Einrückung von ul-, ol- und anderen Listen sollte der Stil wie folgt geschrieben werden:

list-style:none;margin:0px;padding:0px;

Es wurde überprüft, dass im IE Durch die Einstellung „margin:0px“ kann die Einstellung „padding“ keinen Einfluss auf den Stil der oberen, unteren, linken und rechten Einzüge, Leerzeichen und Listennummern oder Punkte in Firefox haben. Durch die Einstellung „margin:0px“ können nur der obere und untere Rand entfernt werden Leerzeichen und die Einstellung padding:0px können nur den linken und rechten Einzug entfernen. List-style:none muss festgelegt werden, um Listennummern oder Punkte zu entfernen. Mit anderen Worten: Im IE kann nur margin:0px festgelegt werden, um den endgültigen Effekt zu erzielen, während in Firefox margin:0px, padding:0px und list-style:none gleichzeitig festgelegt werden müssen, um den endgültigen Effekt zu erzielen.

9. Probleme mit IE und Breite und Höhe

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe als Verwenden Sie es, wenn eine Mindestsituation vorliegt. Dies ist ein großes Problem. Wenn Sie nur Breite und Höhe verwenden, ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Höhe verwenden, werden Breite und Höhe überhaupt nicht festgelegt unter IE.

Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun:

box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

Mindestbreite der Seite

Wie im vorherigen Problem erkennt der IE die Mindestbreite nicht . Um die Mindestbreite zu erreichen, stehen die folgenden Methoden zur Verfügung:

container{ min-width: 600px;width:expression(document.body.clientWidth＜600? "600px": "auto" ) ;}

Die erste Mindestbreite ist normal; die Breite in der zweiten Zeile verwendet jedoch Javascript, das nur vom IE erkannt wird, wodurch Ihr HTML-Dokument auch weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.

Das obige ist der detaillierte Inhalt vonTipps zur Lösung der Browserkompatibilität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!