Stellen Sie Ihre Website automatisch auf den IE7-Kompatibilitätsmodus ein, wenn Sie mit IE8 surfen
|
Vorwort Um sicherzustellen, dass Ihre Webseiten in allen zukünftigen IE-Versionen ein einheitliches Erscheinungsbild haben, wurde mit IE8 die Dateikompatibilität eingeführt. Mit der Dateikompatibilität, einem zusätzlichen Kompatibilitätsmodus, der in IE6 eingeführt wurde, können Sie einen bestimmten Kompilierungsmodus auswählen, wenn der IE Ihre Webseiten rendert. Um sicherzustellen, dass Webseiten in zukünftigen Versionen ein einheitliches Erscheinungsbild haben, führt IE8 Dateikompatibilität ein. Wenn Sie einen zusätzlichen Kompatibilitätsmodus einführen, In diesem Artikel wird die Notwendigkeit der Dateikompatibilität erläutert, die Dateikompatibilitätsmodi aufgelistet, die von aktuellen IE-Versionen verwendet werden können, und es wird gezeigt, wie ein bestimmter Kompatibilitätsmodus ausgewählt wird. Verstehen Sie die Notwendigkeit der Dateikompatibilität Jede Hauptversion des Internet Explorers fügt neue Funktionen hinzu, um die Verwendung des Browsers zu vereinfachen, die Sicherheit zu erhöhen und Industriestandards besser zu unterstützen. Da es sich hierbei um IE-Funktionen handelt, besteht das Risiko, dass ältere Versionen der Website möglicherweise nicht richtig angezeigt werden. Um dieses Risiko zu minimieren, können Webentwickler bei IE6 wählen, wie der IE ihre Seiten kompiliert und anzeigt. Der „Quirks-Modus“ ist die Standardeinstellung, bei der die Seite aus der Perspektive älterer Browser angezeigt wird. Der „Standards-Modus“ (auch „Strict-Modus“ genannt) bietet die umfassendste Unterstützung für Industriestandards. Um diese erweiterte Unterstützung nutzen zu können, müssen Webseiten jedoch die entsprechende <!DOCTYPE>-Direktive enthalten. Wenn eine Webseite keine <!DOCTYPE>-Direktive enthält, zeigt IE6 sie im Quirks-Modus an. Wenn eine Webseite eine gültige <!DOCTYPE>-Direktive enthält, der Browser diese jedoch nicht erkennen kann, wird sie von IE6 im IE6-Standardmodus angezeigt. Da eine kleine Anzahl von Sites bereits eine <!DOCTYPE>-Direktive enthielten, war der Wechsel in den Kompatibilitätsmodus recht erfolgreich. Dadurch können Webentwickler den besten Zeitpunkt für die Migration ihrer Seiten in den Standardmodus wählen. Mit der Zeit verwenden immer mehr Websites den Standardmodus. Sie haben außerdem begonnen, den Internet Explorer anhand der Features und Funktionen von IE6 zu erkennen. Beispielsweise unterstützt IE6 den universellen Selektor (also den globalen Selektor * {} von CSS) nicht, daher verwenden ihn einige Websites, um spezifische Antworten für den IE zu erstellen. Als IE7 Unterstützung für den globalen Selektor hinzufügte, konnten Websites, die auf IE6-Funktionen angewiesen waren, die neue Version des Browsers nicht erkennen. Daher funktionieren diese IE-spezifischen Zuordnungen in IE7 nicht, was dazu führt, dass diese Sites nicht wie erwartet angezeigt werden. Da <!DOCTYPE> nur zwei Kompatibilitätsmodi unterstützt, müssen betroffene Websitebesitzer ihre Sites aktualisieren, um IE7 zu unterstützen. IE8 unterstützt mehr Industriestandards als jeder vorherige Browser. Daher werden für ältere Browser konzipierte Seiten möglicherweise nicht wie erwartet dargestellt. Um all diese Probleme zu lindern, führt IE8 das Konzept der Dateikompatibilität ein, das Ihnen die Auswahl einer bestimmten IE-Version ermöglicht, mit der das Design Ihrer Webseite kompatibel sein soll. Durch die Dateikompatibilität werden in IE8 einige neue Modi hinzugefügt, die dem Browser mitteilen, wie eine Webseite analysiert und kompiliert werden soll. Wenn Ihre Webseite in IE8 nicht richtig angezeigt wird, können Sie Ihre Website entweder aktualisieren, um die neuesten Webstandards zu unterstützen (bevorzugt), oder Ihrer Seite ein Metaelement hinzufügen, um IE8 mitzuteilen, wie Ihre Seite für ältere Browser kompiliert werden soll. Auf diese Weise können Sie auswählen, wann Ihre Site aktualisiert werden soll, um neue Funktionen in IE8 zu unterstützen. Grundlegendes zu Dateikompatibilitätsmodi IE8 unterstützt mehrere Dateikompatibilitätsmodi mit unterschiedlichen Eigenschaften, die sich auf die Art und Weise auswirken, wie Inhalte angezeigt werden. •Der IE8-Emulationsmodus weist den IE an, die Direktive <!DOCTYPE> zu verwenden, um zu bestimmen, wie Inhalte kompiliert werden. Der Befehl „Standardmodus“ wird als IE8-Standardmodus und der Befehl „Quirksmodus“ als IE5-Modus angezeigt. Anders als der IE8-Modus respektiert der IE8-Emulate-Modus die <!DOCTYPE>-Direktive. •Der IE7-Emulationsmodus weist den IE an, die Direktive <!DOCTYPE> zu verwenden, um zu bestimmen, wie Inhalte kompiliert werden. Der Befehl „Standardmodus“ wird als IE7-Standardmodus und der Befehl „Quirksmodus“ als IE5-Modus angezeigt. Anders als der IE7-Modus beachtet der IE7-Emulate-Modus die <!DOCTYPE>-Direktive. Dies ist der am meisten empfohlene Kompatibilitätsmodus für viele Webseiten. •Der IE5-Modus kompiliert Inhalte wie die Anzeige im Quirks-Modus von IE7, die der Anzeige in IE5 sehr ähnlich ist. •Der IE7-Modus kompiliert Inhalte, als würden sie im Standardmodus von IE7 angezeigt, unabhängig davon, ob die Webseite eine <!DOCTYPE>-Direktive enthält. •Der IE8-Modus bietet die höchste Unterstützung für Industriestandards, einschließlich der W3C Cascading Style Sheets Level 2.1-Spezifikation und der W3C Selectors API, sowie eingeschränkte Unterstützung für die W3C Cascading Style Sheets Level 3-Spezifikation (Arbeitsentwurf). •Der Edge-Modus weist den IE an, Inhalte im höchsten aktuell verfügbaren Modus anzuzeigen. Bei Verwendung von IE8 entspricht es dem IE8-Modus. Wenn (hypothetisch) in Zukunft ein Internet Explorer veröffentlicht wird, der einen höheren Kompatibilitätsmodus unterstützt, werden Seiten, die den Edge-Modus verwenden, Inhalte im höchsten von dieser Version unterstützten Modus anzeigen. Dieselben Seiten werden bei der Anzeige mit IE8 weiterhin normal angezeigt. Da der Edge-Modus den höchsten von dieser IE-Version unterstützten Modus zum Anzeigen des Inhalts der durchsuchten Webseite verwendet, wird empfohlen, ihn nur auf Testseiten und anderen nicht kommerziellen Seiten zu verwenden. Angeben des Dateikompatibilitätsmodus Um einen Dateimodus für Ihre Seite festzulegen, fügen Sie mithilfe des Metaelements einen X-UA-kompatiblen http-equiv-Header in Ihre Seite ein. Nachfolgend sehen Sie ein Beispiel für die Angabe der Kompatibilität mit dem IE7-Emulate-Modus. <html> <Kopf> <!-- Internet Explorer 7 nachahmen --> <meta http-equiv="X-UA-kompatibel" content="IE=EmulateIE7" /> <title>Meine Webseite</title> </Kopf> <Text> <p>Hier kommt der Inhalt hin.</p> </body> </html> Der Inhalt ändert sich mit dem angegebenen Seitenmodus. Um IE7 zu emulieren, geben Sie IE=EmulateIE7 an. Geben Sie IE=5, IE=7 oder IE=8 an, um einen der Kompatibilitätsmodi auszuwählen. Sie können auch IE=edge angeben, um IE8 anzuweisen, den höchsten unterstützten Modus zu verwenden. Der X-UA-kompatible Header unterscheidet nicht zwischen Groß- und Kleinschreibung. Mit Ausnahme des Titelelements und anderer Metaelemente muss es jedoch vor anderen Elementen im Kopfbereich der Webseite erscheinen. Konfigurieren des Webservers zum Festlegen des Standardkompatibilitätsmodus Webmaster können einen bestimmten Dateikompatibilitätsmodus für ihre Website festlegen, indem sie einen benutzerdefinierten Header für die Website definieren. Die konkrete Methode hängt von Ihrem Webserver ab. Beispielsweise ermöglicht die folgende Datei „web.config“ Microsoft Internet Information Services (IIS), einen benutzerdefinierten Header zu definieren, um alle Webseiten automatisch im IE7-Modus zu kompilieren. <?xml version="1.0" encoding="utf-8"?> <Konfiguration> <system.webServer> <httpProtokoll> <benutzerdefinierteHeader> <klar /> <add name="X-UA-Compatible" value="IE=EmulateIE7" /> </benutzerdefinierteHeader> </httpProtokoll> </system.webServer> </Konfiguration> Wenn Sie auf Ihrem Webserver einen Standarddateikompatibilitätsmodus angegeben haben, können Sie diesen außer Kraft setzen, indem Sie auf einzelnen Seiten einen anderen Dateikompatibilitätsmodus angeben. Der auf der Webseite angegebene Modus hat Vorrang vor dem auf dem Server angegebenen Modus. Informationen zum Festlegen benutzerdefinierter Header finden Sie auf Ihrem Webserver. Weitere Informationen finden Sie hier: Implementieren des META-Switches auf Apache Implementieren des META-Switches auf IIS Bestimmen Sie den Dateikompatibilitätsmodus Um den Dateikompatibilitätsmodus einer Webseite bei der Anzeige mit IE8 zu bestimmen, verwenden Sie die Funktion „documentMode“ des Dokumentobjekts. Wenn Sie beispielsweise den folgenden Code in die URL-Leiste von IE8 eingeben, wird der Dokumentmodus der aktuellen Seite angezeigt. javascript:alert(Dokument.Dokumentmodus); Die Funktion documentMode gibt einen Wert zurück, der dem Dateikompatibilitätsmodus der aktuellen Seite entspricht. Wenn beispielsweise angegeben ist, dass die Webseite den IE8-Modus unterstützt, gibt documentMode den Wert „8“ zurück. Die in IE6 eingeführte CompatMode-Funktion unterstützt nicht die in IE8 eingeführte DocumentMode-Funktion. Derzeit im CompatMode erstellte Anwendungen funktionieren in IE8 weiterhin, müssen jedoch für die Verwendung des DocumentMode aktualisiert werden. Wenn Sie JavaScript verwenden möchten, um den Kompatibilitätsmodus eines Dokuments zu bestimmen, fügen Sie den folgenden Code ein, um ältere IE-Versionen zu unterstützen. Motor = null; if (window.navigator.appName == "Microsoft Internet Explorer") { // Dies ist ein IE-Browser. In welchem Modus befindet sich die Engine? wenn (Dokument.Dokumentmodus) // IE8 Engine = Dokument.Dokumentmodus; sonst // IE 5-7 { engine = 5; // Sofern nicht das Gegenteil bewiesen ist, gehe von Quirks-Modus aus. wenn (Dokument.Kompatibilitätsmodus) { wenn (document.compatMode == "CSS1Compat") engine = 7; // Standardmodus } } // die Engine-Variable enthält jetzt den Dokumentkompatibilitätsmodus. } Grundlegendes zu Inhaltsattributwerten Inhaltsattributwerte können flexibel andere als die zuvor angegebenen Werte annehmen. Dadurch haben Sie mehr Kontrolle darüber, wie der Internet Explorer Ihre Seiten anzeigt. Sie können den Wert des Inhaltsattributs beispielsweise auf IE=7.5 festlegen. Wenn Sie dies tun, versucht der IE, diesen Wert in einen Versionsvektor umzuwandeln und wählt das nächstgelegene Ergebnis aus. In diesem Fall stellt der IE den IE7-Modus ein. Die folgenden Beispiele zeigen diesen Modus auf andere Werte eingestellt. <meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5-Modus --> <meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7-Modus --> <meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8-Modus --> <meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5-Modus --> <!-- Dieser Header imitiert Internet Explorer 7 und verwendet <!DOCTYPE>, um festzulegen, wie die Webseite angezeigt werden soll --> <meta http-equiv="X-UA-kompatibel" content="IE=EmulateIE7"> Hinweis: Die vorherigen Beispiele zeigen einzelne Inhaltswerte. Tatsächlich führt der IE nur den ersten X-UA-kompatiblen Header auf der Webseite aus. Sie können Inhaltsattribute auch verwenden, um mehrere Dateikompatibilitätsmodi anzugeben. Dadurch wird sichergestellt, dass Ihre Seiten in zukünftigen Browserversionen konsistent angezeigt werden. Um mehrere Dokumentmodi festzulegen, legen Sie die Inhaltseigenschaften fest, um den Modus zu identifizieren, den Sie verwenden möchten. Verwenden Sie Semikolons, um Muster zu trennen. Wenn eine bestimmte Version von IE mehr als einen der angeforderten Kompatibilitätsmodi unterstützt, wird der höchste verfügbare Modus verwendet, der im Inhaltsattribut des Headers aufgeführt ist. Sie können diese Funktion verwenden, um bestimmte Kompatibilitätsmodi auszuschließen, dies wird jedoch nicht empfohlen. Beispielsweise schließt die folgende Kopfzeile den IE7-Modus aus. <meta http-equiv="X-UA-kompatibel" content="IE=5; IE=8" /> abschließend Kompatibilität ist für Webdesigner ein sehr wichtiges Anliegen. Obwohl es ideal wäre, eine Website erstellen zu können, die völlig unabhängig von den Funktionen und Funktionalitäten des Webbrowsers ist, ist dies manchmal nicht möglich. Der Dateikompatibilitätsmodus kann eine Webseite auf eine bestimmte IE-Version beschränken. Verwenden Sie den Header „X-UA-Compatible“, um anzugeben, welche IE-Versionen Ihre Seite unterstützt. Verwenden Sie document.documentMode, um den Kompatibilitätsmodus der Seite zu bestimmen. Durch die Entscheidung zur Unterstützung einer bestimmten IE-Version können Sie sicherstellen, dass Ihre Seiten in zukünftigen Browserversionen konsistent angezeigt werden. 1. <meta http-equiv="X-UA-kompatibel" content="IE=5" /> Es ist, als würde man den Quirks-Modus von Windows Internet Explorer 7 verwenden, der der Inhaltsanzeige von Windows Internet Explorer 5 sehr ähnlich ist. 2. <meta http-equiv="X-UA-kompatibel" content="IE=7" /> Unabhängig davon, ob die Seite eine <!DOCTYPE>-Direktive enthält, verhält sie sich, als würde der Standardmodus von Windows Internet Explorer 7 verwendet. 3. <meta http-equiv="X-UA-kompatibel" content="IE=8" /> 4. <meta http-equiv="X-UA-kompatibel" content="edge" /> Der Edge-Modus weist Windows Internet Explorer an, Inhalte im höchsten verfügbaren Modus anzuzeigen, wodurch der Sperrmodus grundsätzlich unterbrochen wird. 5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> Der Modus „EmulateIE7“ weist Windows Internet Explorer an, die Direktive <!DOCTYPE> zu verwenden, um zu bestimmen, wie Inhalte gerendert werden. Anweisungen im Standardmodus werden im Standardmodus von Windows Internet Explorer 7 angezeigt, während Anweisungen im Quirksmodus im IE5-Modus angezeigt werden. Im Gegensatz zum IE7-Modus respektiert der EmulateIE7-Modus die <!DOCTYPE>-Direktive. Für die meisten Websites ist dies der bevorzugte Kompatibilitätsmodus. |
<<: Fügen Sie dem Vortag des Website-Codeblocks den Code für die Schaltfläche „Code kopieren“ hinzu
Artikel empfehlen
Verwenden von Streaming-Abfragen in MySQL, um Daten-OOM zu vermeiden
Inhaltsverzeichnis 1. Einleitung 2. JDBC implemen...
Beispielcode für mehrere Elementtabellen, um synchrones Scrollen zu erreichen
Element UI implementiert mehrere Tabellen, die gl...
Wichtige Bonuselemente zur Optimierung und Verpackung des Frontends von Vue-Projekten
Inhaltsverzeichnis Vorwort 1. Routing von Lazy Lo...
Studiennotizen zur MySQL Master-Slave-Konfiguration
● Ich hatte vor, einige Cloud-Daten zu kaufen, um...
So erstellen Webdesigner Bilder für Retina-Displays
Besonderer Hinweis: Dieser Artikel wurde basieren...
Tutorial zur Installation von MySQL8 auf Centos7
Neue Funktionen in MySQL 8: Meine persönliche Mei...
Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann
Problembeschreibung: Ich habe einen Desktop-Compu...
Tutorial zur Installation von MySQL unter Linux
Inhaltsverzeichnis 1. Löschen Sie die alte Versio...
Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)
Das CSS-Positionsattribut gibt den Positionierung...
Eine kurze Analyse der LRU-verknüpften Liste von MySQL
1. Beschreiben Sie kurz die traditionelle LRU-ver...
Ein Beispiel für die dynamische Implementierung verschiedener Datenstile in einer Spalte der el-Tabelle des Elements ui
Problembeschreibung Im Rahmen der Ele.me-Benutzer...
Eine kurze Analyse der parallelen WriteSet-Replikation von MySQL
【Historischer Hintergrund】 Ich arbeite seit drei ...
So halten Sie eine lange Verbindung aufrecht, wenn Sie den Nginx-Reverse-Proxy verwenden
· 【Szenenbeschreibung】 Nach HTTP1.1 unterstützt d...
js, um den Zahlungs-Countdown zu realisieren und zur Startseite zurückzukehren
Zahlungs-Countdown, um zur Startseite zurückzukeh...
Verwenden Sie einfaches jQuery + CSS, um einen benutzerdefinierten Tooltip für Tag-Titel zu erstellen
Einführung Verwenden Sie einfaches jQuery+CSS, um ...