Fünf Lösungen für Cross-Browser-Probleme (Zusammenfassung)

Kurz zusammengefasst: Browserkompatibilitätsprobleme bereiten oft Kopfzerbrechen. Hier sind fünf Tipps, um diese Probleme zu vermeiden.

1. Präfixieren Sie CSS3-Stile

Wenn Sie moderne CSS-Snippets wie „Box-Sizing“ oder „Background-Clip“ verwenden, achten Sie darauf, die entsprechenden Präfixe zu verwenden.

-moz- /* Firefox und andere Browser, die die Mozilla-Browser-Engine verwenden */
-webkit- /* Safari, Chrome und andere Browser, die die Webkit-Engine verwenden */
-o- /* Oper */
-ms- /* IE-Browser (aber nicht immer IE) */

2. Reset nutzen

Sie können normalize.css verwenden, hier ist die Version, die ich verwende, aus dem Genesis Framework Style Sheet.

html, Textkörper, Div, Span, Applet, Objekt, Iframe, h1, h2,
h3,h4,h5,h6,p,Blockzitat,a,Abk.,Akronym,Adresse,
groß, zitieren, del, dfn, em, img, ins, kbd, q, s, samp, klein,
Schlag, stark, Sub, sup, tt, var, b, u, i, Mitte, dl, dt,
dd, ol, ul, li, Feldsatz, Formular, Bezeichnung, Legende, Tabelle, Überschrift,
tbody,tfoot,thead,tr,th,td,Artikel,beiseite,Leinwand,Details,
einbetten, Abbildung, Figcaption, Fußzeile, Kopfzeile, Hgroup, Eingabe, Menü,
nav, Ausgabe, Ruby, Abschnitt, Zusammenfassung, Zeit, Markierung, Audio, Video {
Rand: 0;
Rand: 0;
Polsterung: 0;
vertikale Ausrichtung: Grundlinie;
}

3. Vermeiden Sie die Polsterbreite

Wenn Sie eine Polsterung hinzufügen, die der Breite eines Elements entspricht, wird es größer. Breite und Polsterung werden addiert.
Um dies zu beheben, können Sie Folgendes hinzufügen:

* { -webkit-box-sizing: border-box; /* Safari/Chrome und andere WebKit-Browser*/
-moz-box-sizing: border-box; /* Firefox und andere Gecko-basierte Browser*/
Boxgröße: Rahmenbox; }

4. Schwimmer löschen

Wird es nicht gereinigt, können leicht Probleme auftreten. Wenn Sie interessiert sind, können Sie diesen Artikel von Chris Coyier lesen.

Dies kann mit diesem CSS-Snippet behoben werden:

 .parent-selector:nach {
 Inhalt: "";
 Anzeige: Tabelle;
 klar: beides;
 }

Wenn Sie die meisten Ihrer Elemente umschließen, können Sie dies ganz einfach tun, indem Sie dies zu Ihrer Wrap-Klasse hinzufügen.

 .wrap:nach {
 Inhalt: "";
 Anzeige: Tabelle;
 klar: beides;
 }

Erledigt!

5. Testen

Erstellen Sie Ihre eigene browserübergreifende Infrastruktur oder verwenden Sie einfach Endtest.
Wenn Sie sich diese Dinge zur Gewohnheit machen, können Sie wahrscheinlich 90 % aller Browserprobleme lösen.

Originallink:

5 Tricks zur Vermeidung von Cross-Browser-Problemen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.