Untersuchen von Problemen mit dem Dokumentmodus

Im Thema Aktivieren der Unterstützung von Standards haben Sie erfahren, dass der Dokumenttyp einer Webseite ausschlaggebend für die von der Webseite unterstützten Funktionen ist. Damit in Windows Internet Explorer und anderen modernen Browsern alle unterstützten Features aktiviert sind, müssen Webseiten im Standards-Modus angezeigt werden. Legen Sie für Webseiten den Standards-Modus fest, indem Sie einen Standards-basierten Dokumenttyp deklarieren. Dies wird im folgenden Codebeispiel veranschaulicht.


<!DOCTYPE html>


Wenn auf Ihren Webseiten kein Standards-basierter Dokumenttyp deklariert wird, werden Features, für die die Unterstützung von Standards erforderlich ist, in Internet Explorer nicht angezeigt. Wenn eine Webseite nicht ordnungsgemäß angezeigt wird, können Sie dem Problem mithilfe der F12-Entwicklertools auf den Grund gehen. In vielen Fällen lassen sich solche Probleme durch die Deklaration eines standardbasierten Dokumenttyps mithilfe der !DOCTYPE-Direktive beheben.

In diesem Thema lernen Sie, mit den F12-Tools ein Problem im Zusammenhang mit dem Dokumenttyp einer Webseite zu erforschen und zu identifizieren.

Im Thema Aktivieren der Unterstützung von Standards wurden zwei Webseiten miteinander verglichen, von denen eine aussah wie die Webseite in der folgenden Abbildung.

Im IE5-Modus (Quirks) angezeigte Webseite

Der Entwurf dieser Webseite umfasst das border-radius-Attribut, ein CSS3-(Cascading Style Sheets, Level 3)-Attribut, das abgerundete Ecken anzeigt. Im Beispiel wird das Objekt jedoch mit herkömmlichen spitzen Ecken angezeigt. Dies ist darauf zurückzuführen, dass Internet Explorer bestimmte CSS (Cascading Style Sheets)-Eigenschaften, die von dem zum Anzeigen einer Webseite verwendeten Dokumentmodus nicht unterstützt werden, ignoriert.

Da der IE5-Modus (Quirks) die border-radius-Eigenschaft nicht unterstützt, ignoriert Internet Explorer die Eigenschaft bei der Anzeige von Webseiten in diesem Dokumentmodus.

Wenn Sie die F12-Tools verwenden, können Sie eine Webseite durchsuchen, nachdem sie von Internet Explorer angezeigt wurde. Auf diese Weise können Sie Probleme wie die spitzen Ecken in der Abbildung oben erkennen und beheben. In diesem Thema wird eine Möglichkeit zur Erkennung ähnlicher Probleme vorgestellt. Dabei wird auf Folgendes eingegangen:

Überprüfen der CSS-Attributwerte

Führen Sie die folgenden Schritte aus, um die CSS-Attributwerte eines Objekts auf der Webseite zu überprüfen.

  1. F12 drücken, um die Entwicklertools (F12) zu öffnen.

    F12 drücken, um die Entwicklertools (F12) zu öffnen.
  2. Klicken Sie auf die Schaltfläche Element durch Klicken auswählen, und klicken Sie dann auf das Objekt, das die zu überprüfenden CSS-Eigenschaften enthält.

    Auswählen des zu überprüfenden Objekts mit "Element durch Klicken auswählen" oder mithilfe der HTML-Struktur
  3. Klicken Sie auf die Schaltfläche Formatvorlagen verfolgen, und überprüfen Sie die Attribute der Eigenschaften, die Sie interessieren.

    Mit "Formatvorlagen verfolgen" werden die CSS-Attribute für das ausgewählte Objekt auf einer Webseite angezeigt.

In diesem Beispiel wird nach den Werten der untergeordneten Attribute des border-radius-Attributs gesucht, insbesondere border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius und border-top-right-radius. Allerdings werden diese Attribute in diesem Beispiel nicht angezeigt.

Dies ist darauf zurückzuführen, dass die Webseite im IE5-Modus angezeigt wird. In Windows Internet Explorer 9 wird die border-radius-Eigenschaft nur im IE9-Standards-Modus unterstützt. Da der IE5-Modus die border-radius-Eigenschaft nicht unterstützt, ignoriert Internet Explorer die Eigenschaft bei der Anzeige von CSS-Attributen.

Im nächsten Abschnitt wird demonstriert, wie zur Überprüfung der aktuelle Dokumentmodus der Webseite geändert wird.

Anzeigen von Webseiten in anderen Dokumentmodi

Führen Sie die folgenden Schritte aus, um mithilfe der F12-Tools Webseiten in anderen Dokumentmodi anzuzeigen.

  1. Sofern die F12-Tools nicht bereits geöffnet sind, drücken Sie F12, um die Tools zu öffnen. Der aktuelle Dokumentmodus wird im Fenster der F12-Tools rechts auf der Menüleiste angezeigt.

    Der Dokumentmodus einer Webseite wird oben rechts im Fenster der Entwicklertools (F12) angezeigt
  2. Wenn Sie auf die Menüschaltfläche für den Dokumentmodus klicken, werden in einem Menü weitere Dokumentmodi angezeigt, die zum Anzeigen der Webseite verwendet werden können.

    Beim Klicken auf das Steuerelement für den Dokumentmodus wird ein Menü mit weiteren für die Webseite verfügbaren Dokumentmodi angezeigt.
  3. Klicken Sie im Menü auf die Option Internet Explorer 9 Standards, um die Webseite im IE9-Modus anzuzeigen. Wenn Sie die Formatattribute für das zuvor ausgewählte Objekt nachverfolgen, werden Sie feststellen, dass die untergeordneten border-radius-Attribute jetzt zusammen mit den anderen CSS-Attributen angezeigt werden.

    Nach Auswahl des Befehls 'Internet Explorer 9 Standards' wird eine Webseite im IE9-Standards-Modus angezeigt.
  4. Im richtigen Dokumentmodus wird die Webseite wie gewünscht dargestellt, und die div-Elemente werden mit abgerundeten Ecken angezeigt.

    Die Ecken sind abgerundet, wenn die Webseite im IE9-Standards-Modus angezeigt wird.

Bedenken Sie, dass mit den F12-Tools nur die aktuelle Anzeige einer Webseite in Internet Explorer geändert wird, nicht jedoch der ursprüngliche Quellcode der Webseite.

Wenn bei einer Produktionswebseite ein solches Problem vorliegt, ändern Sie das zugrunde liegende Markup, indem Sie eine !DOCTYPE-Direktive hinzufügen, mit der ein standardbasierter Dokumenttyp angegeben wird, wie im folgenden Codebeispiel veranschaulicht.


<!DOCTYPE html>


Hinweis  Sie können auch einen "X-UA-kompatiblen" Header verwenden, um den Dokumentmodus für eine Webseite anzugeben. Weitere Informationen finden Sie unter Definieren der Dokumentkompatibilität.

Die F12-Tools umfassen verschiedene Tools, die Ihnen helfen, Probleme mit Ihren Webseiten schnell zu erkennen und zu beheben. In diesem Beispiel wurde mithilfe der Tools ein Problem mit dem Dokumentmodus einer Webseite erkannt. Weitere Informationen zu den F12-Tools erhalten Sie unter Debuggen und Beheben von Problemen der Webseite.

Verwandte Themen

Aktivieren der Unterstützung von Standards

 

 

Anzeigen:
© 2014 Microsoft