Informationen zu aufgetretenen Browserkompatibilitätsproblemen und Lösungen (empfohlen)

Vorwort:

Letzten Sonntag bat mich ein Senior, ihm bei der Erstellung von drei Seiten zu helfen. Es gab keinen Datenaustausch oder ähnliches, es war nur eine einfache Frontend-Seite. Ich hatte lange nichts gemacht und war es leid, Bücher zu lesen, also nahm ich es und betrachtete es als eine Möglichkeit zum Üben. Da ich vorher nicht systematisch Bücher gelesen hatte, habe ich viele Probleme nicht umfassend betrachtet. Ich war in einem Zustand, in dem ich die Fakten kannte, aber nicht die Gründe. Obwohl ich jetzt noch viel zu lernen habe, ist es besser, meine Mängel zu kennen, als sie nicht zu kennen, oder? Und das gilt auch als Fortschritt? Kurz gesagt, ich bin auf verschiedene Probleme gestoßen und habe festgestellt, dass die Probleme hauptsächlich in zwei Kategorien unterteilt werden können. Erstens: Ich habe nicht genug Wissen und weiß daher nicht, wie ich sie lösen soll. Die meisten dieser Probleme können gelöst werden, indem man Baidu oder Experten fragt. Zweitens: Es gibt tatsächlich Lücken in der aktuellen Technologie, unabhängig davon, ob sie nicht implementiert wurde oder ob sie implementiert wurde, aber es gibt Unklarheiten oder Konflikte. Das größte Problem, das ich bei der Seite hatte, die ich dieses Mal erstellt habe, war die Browserkompatibilität. Wenn ich eine Lösung habe, würde ich sie hier gerne mit Ihnen teilen. Ich hoffe, dass sie andere inspiriert und ich mehr lernen kann. Vielen Dank.

Text:

1. Aufgetretenes Problem: Der aktuelle Browser ist IE7 und niedriger

Lösung: Bedecken Sie es mit einem Div, sodass Benutzer den auf der normalen Seite angezeigten Inhalt nicht sehen können.

Implementierungsmethode: Setzen Sie das Anzeigeattribut des Div, das normalerweise den Inhalt anzeigt, auf „Keine“ und das Anzeigeattribut des überlagernden Div auf „Blockieren“ (PS: Sie können einen Browser-Download-Link hinzufügen, damit Benutzer die Seite so schnell wie möglich normal durchsuchen können).

2. Problem: Abgerundete Ecken können im IE8 nicht erreicht werden, da der IE8 CSS3 nicht gut unterstützt

Lösung: Laden Sie PIE herunter, damit IE8 abgerundete Ecken in CSS3 unterstützt

Implementierungsmethode: Auf die Implementierungsmethode werde ich hier nicht näher eingehen. Laden Sie es herunter und ändern Sie dann den Pfad in „behavior: url(path/PIE.htc);“, und schon können Sie darauf zugreifen. Hier sind einige Punkte, die beachtet werden müssen:

(1) Diese Referenz muss in der HTML-Datei platziert werden und der Pfad ist relativ zur referenzierten HTML-Datei. Die Platzierung in der CSS-Datei hat keine Auswirkung

(2) Wenn Sie feststellen, dass das Objekt, das abgerundete Ecken benötigt, nach erfolgreicher Referenzierung verschwindet, haben Sie keine Angst. Nehmen Sie einfach eine Dusche und es ist in Ordnung. Ich habe es selbst getestet.

Nur ein Scherz. Ich bin duschen gegangen, aber es ist nicht erschienen, also gab es einen Fehler im Code oder so etwas. Zu Gott beten ist sinnlos (Hände ausbreiten). Ich habe es noch einmal von Anfang an angepasst und bin zu Baidu gegangen und habe das Problem gefunden. Es lag am Z-Index. Aber nur einen Z-Index festzulegen hatte keine Wirkung. Oh ~ Es stellte sich heraus, dass das Positionsattribut nicht statisch sein kann. Dies ist der Standardwert. Ok, die Position auf relativ festzulegen ist ok. In IE8 werden perfekt abgerundete Ecken erreicht ~ (An dieser Stelle danke ich den Ingenieuren, die PIE geschrieben haben, aufrichtig. Es ist tatsächlich Ihren Bemühungen zu verdanken, dass ich den gewünschten Effekt so einfach erzielen konnte, Consan Amidah ~)

3. Problem: IE8 kann @media screen und (....) in CSS3 immer noch nicht unterstützen, um ein responsives Layout zu erreichen

Lösung: Es geht nicht anders, denn es ist ein so lästiger kleiner Kobold. (Achselzucken) Schreiben Sie eine separate js-Datei, um die Bildschirmbreite zu ermitteln, und fügen Sie dann die entsprechenden Stile hinzu

Implementierungsmethode: Fügen Sie „<!--[if lt ie9]><script type='text/javascript' src='path'></script> <![endif]-->“ in HTML ein und implementieren Sie es dann in der importierten js-Datei. Um Sie zum Lachen zu bringen, möchte ich Ihnen eine Geschichte über eine schmerzhafte Sache erzählen, die mir in dieser Zeit begegnet ist. Ich habe es lange versucht, aber aus irgendeinem unbekannten Grund festgestellt, dass es nicht funktioniert hat. Ich habe online nach Codes von verschiedenen großartigen Programmierern gesucht, sie alle nacheinander verglichen, aber es hat trotzdem nicht funktioniert! Wie kann das nicht möglich sein? Das ist eine so schändliche Sache. Dann fand ich heraus, dass es daran lag, dass zwischen „ie9“ und ">" ein zusätzliches Leerzeichen stand.

(Manuelle Abmeldung). Allerdings habe ich nach der Behebung des Fehlers immer noch ein Erfolgserlebnis. Da ich weiß, dass es aus diesem Grund ist, denke ich mir: „Ich könnte mich genauso gut vorher 100 Mal umbringen.“

Der JS-Code ist unten aufgeführt. Das Prinzip ist eigentlich sehr einfach. Der Hauptgrund ist, dass es einige kleine Unterschiede zwischen innerWidth und clientWidth gibt. Wenn Sie Fragen haben, gibt es im Internet viele detaillierte Analysen von Experten, nach denen Sie suchen können.

4. Aufgetretenes Problem: In Versionen vor IE11 wird ein seltsamer blauer Rahmen angezeigt, wenn sich <img> in einem <a>-Tag befindet

Implementierungsmethode: Fügen Sie ein „border:0;“ zu <img> hinzu, um sofortige Ergebnisse zu erzielen

5. Aufgetretenes Problem: Da es sich um die Titelseite handelt, habe ich das Bild gescrollt und die Bilder unter IE10 weisen unerklärlicherweise zusätzliche Lücken auf

Implementierungsmethode: Das Hinzufügen von „display:block;“ zu <img> hat eine hervorragende Wirkung

6. Aufgetretenes Problem: Ich habe „writing-mode:tb-rl;“ verwendet, um Text vertikal anzuzeigen, aber als ich es auf dem Computer meines Freundes anpasste, stellte ich fest, dass es keine Auswirkungen auf mein geliebtes FF hatte. Das ist unmöglich? ? ? Dann fand ich heraus, dass diese Eigenschaft in FF4 und darunter nicht implementiert war und dass sie ursprünglich vom Internet Explorer erdacht wurde (um ehrlich zu sein, war ich damals etwas überrascht, schließlich ist der Internet Explorer in meinen Augen ein einsames Genie, das seine eigenen kleinen Erfindungen macht, die aber alle destruktiv sind. Es stellte sich also heraus, dass eine so nützliche Eigenschaft vom Internet Explorer erdacht wurde und dass FF sie erst später implementiert hat, was mich ziemlich überraschte).

Lösung: Auf keinen Fall. Wenn es ein Problem gibt, müssen Sie einen Weg finden, es zu lösen. Die einzige Möglichkeit besteht darin, ul li-Sätze einzeln zu verschachteln, dann nach rechts zu schweben und eine feste Breite festzulegen, um dies zu erreichen (um ehrlich zu sein, ist diese Methode nach der Verwendung des Schreibmodus dumm und der Effekt ist nicht gut).

Implementierungsmethode: Nachdem wir nun die Idee erklärt haben, kommen wir direkt zum Code.

Die oben genannten Probleme sind bei der Anpassung der Kompatibilität aufgetreten. Im Folgenden sind die beiden Arten von Problemen aufgeführt, die ich zuvor erwähnt habe, nämlich die Probleme, auf die ich aufgrund meiner eingeschränkten Fähigkeiten gestoßen bin, und die bestehenden Probleme, die nicht gelöst werden können.

1: Dieses Problem lässt sich letztendlich auf zwei Worte reduzieren: schweben! (Ich muss es fett und unterstrichen machen) Egal wie unerklärlich dieses Div nach hinten läuft; hey, warum folgt dein Bild dem Layout der Navigation oben; hey, warum ist dieses P-Tag so verantwortungslos? Die Bilder mit euch allen bleiben unten, aber warum rennst du zum p-Tag im Div oben? Bist du schwul? Nun, ich gebe zu, dass ich letzten Endes die Schuld selbst auf mich nehmen muss, denn Schweben ist tatsächlich sehr mächtig, aber wenn es nicht richtig eingesetzt wird, treten einige sehr merkwürdige Ergebnisse auf. Lesen Sie Ihr Buch also einfach sorgfältig durch. Es scheint harmlos, hier diese Tabs oder Browser zu kritisieren.

2: (1) Da die Datei asynchron geladen werden muss, wird die JQuery-Lademethode verwendet, die jedoch in Google Chrome verboten ist. Es gibt keine Möglichkeit, sie anzupassen, sie kann jedoch auf dem Server geändert werden. Dasselbe gilt für 360.

(2) Google kann die Schriftgröße nicht kleiner als 12px einstellen. Das ist ein Fehler, den es bei Google schon lange gibt. Ich weiß nicht, warum er beibehalten wurde, vielleicht weil sie ihn cool finden? Ich habe online gesucht und eine Lösung gefunden: „-webkit-text-adjust:none;“, aber ich habe es nicht getestet. Google hat es direkt verboten und gesagt, dass es so etwas nicht gibt.

Nachwort:

Zum Schluss habe ich noch ein kleines persönliches Gefühl. Man kann tatsächlich viel Wissen durch Übung lernen und es ist nicht so langweilig wie das Lesen von Büchern. Dieses Wissen wird jedoch sehr verstreut sein, sodass systematisches Lernen wie das Lesen von Büchern weiterhin erforderlich ist. Daher werde ich in Zukunft mein Bestes geben, um beides zu kombinieren, und hoffe, weitere Fortschritte zu erzielen. Ich habe auch ein paar Einblicke in den Internet Explorer: Da der Internet Explorer sehr individuell ist und insbesondere bei der Browserimplementierung einzigartig ist, hasste ich ihn früher und dachte, dass es sich wahrscheinlich um eine Gruppe genialer Leute handelt, die sich auf sich selbst verlassen und auf andere herabsehen. Aber jetzt finde ich, dass der Internet Explorer für mich persönlich tatsächlich ein Sündenbock ist. Er selbst hat viele Ideen zur Front-End-Implementierung und macht viele Dinge im Detail sehr gut. Er ist auch sehr zukunftsorientiert, was die Entwicklung der Front-End-Technologie angeht. Der Grund, warum ich ihn früher immer gescholten habe, war wahrscheinlich meine Unwissenheit. Schließlich hat man als Genie immer ein Temperament, das sich von dem eines normalen Menschen unterscheidet, um die Tatsache hervorzuheben, dass man ein Genie ist. Ich werde es nicht mehr grundlos schelten, aber ich hoffe immer noch aufrichtig, dass es eines Tages aufhört, unsere lieben Front-End-Programmierer auf diese Weise zu quälen :-)

Der obige Artikel über aufgetretene Browserkompatibilitätsprobleme und Lösungen (empfohlen) ist der gesamte Inhalt, den der Herausgeber mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.