(0) exportieren Drucken
Alle erweitern
Erweitern Minimieren

Ereignis 1040 - Cascading Stylesheet (CSS-Fixes)

Veröffentlicht: Juni 2010

Letzte Aktualisierung: Juni 2010

Betrifft: Windows 7, Windows Vista

Windows® Internet Explorer® 8 und Windows Internet Explorer 7 enthalten eine Vielzahl von Verbesserungen beim Analysieren und Rendern von Cascading Stylesheets (CSS) verglichen mit früheren Versionen von Internet Explorer. Ziel der Verbesserungen war es, die Konsistenz bei der Auslegung der Cascading Stylesheets von Internet Explorer zu erhöhen und so der Empfehlung des W3C (World Wide Web Consortium) zu folgen, damit Entwicklern zuverlässige Funktionen zur Verfügung stehen.

In einigen Fällen führen diese Änderungen möglicherweise zu einem Verhalten der vorhandenen Inhalte, das mit früheren Versionen von Internet Explorer nicht kompatibel ist. Dies kann sich so äußern, dass Elemente auf einen anderen Bereich der Seite verschoben werden oder dass sich Inhalte bei der Anzeige in Internet Explorer 8 oder Internet Explorer 7 überschneiden. Diese Probleme treten gehäuft bei Inhalten auf, die bestimmte CSS-Konstrukte (häufig als Filter bezeichnet) zur Umgehung von Problemen einsetzen, die im standardkonformen Modus früherer Versionen von Internet Explorer auftraten.

Wann wird dieses Ereignis protokolliert?

Dieses Ereignis wird protokolliert, wenn ein Problem aus den folgenden vier Kategorien auftritt:

  • Erkennung von Zeichenfolgen des Benutzer-Agenten und von Browsern

  • XML-Prolog und der Wechsel zum standardkonformen Modus

  • Änderungen des Boxmodells

  • CSS-Filter

Weitere Informationen, Beispiele und zusätzliche Ressourcen finden Sie im Thema Ereignis 1040 - Cascading Stylesheet (CSS-Fixes) in Anwendungskompatibilität von Internet Explorer (möglicherweise in englischer Sprache).

Beheben von Fehlern auf Webseiten

Wird eine Webseite in Internet Explorer 7 oder Internet Explorer 8 nicht wie in früheren Internet Explorer-Versionen gerendert, müssen Sie die Ursache des Problems herausfinden. In den folgenden Abschnitten werden die häufigsten Ursachen besprochen.

Erkennung von Zeichenfolgen des Benutzer-Agenten und von Browsern

Eine mögliche Ursache ist die Erkennung von Zeichenfolgen des Benutzer-Agenten. Die Erkennung von Zeichenfolgen des Benutzer-Agenten findet dann statt, wenn verschiedene Inhalte durch Websites bereitgestellt werden, abhängig vom Typ und von der Version des Internetbrowsers, und kein Zugriff durch Internet Explorer 7 oder Internet Explorer 8 erwartet wird.

noteHinweis
Weitere Informationen finden Sie im MSDN-Thema Effizienteres Erkennen von Internet Explorer (möglicherweise in englischer Sprache).

XML-Prolog und der Wechsel zum standardkonformen Modus

Der XML-Prolog gibt die zu verwendende XML-Version an und kommt häufig im Zusammenhang mit XHTML auf Webseiten vor. In Microsoft® Internet Explorer 6 wurde eine Methode zum Wechseln zwischen dem quirks-Modus und dem standardkonformen Modus eingeführt. Bei dieser Methode muss die Codierung an vorderster Stelle auf einer Webseite angezeigt werden. Leider muss auch der XML-Prolog am Seitenanfang einer Webseite angezeigt werden, wobei er von den meisten Webseitenautoren nach der "strict-type"-Weiche eingefügt wird. In einem solchen Fall ignoriert Internet Explorer 6 die Absicht des Autors und rendert die Seite im quirks-Modus und nicht im standardkonformen Modus. Internet Explorer löst dieses Problem, indem der XML-Prolog unmittelbar nach der "strict-mode"-Weiche angezeigt werden kann. Infolge dieser Änderung kann es aufgrund des vom Inhalt erwarteten Modus zu Problemen beim Rendern kommen. Wenn Sie sicherstellen möchten, dass Ihre Webseiten korrekt gerendert werden, öffnen Sie die Webseite in einem Text-Editor, und überprüfen Sie die ersten beiden Codezeilen. Wenn Sie den XML-Prolog und einen standardkonformen <!DOCTYPE> sehen, muss der Webseitenautor den Inhalt aktualisieren.

Änderungen des Boxmodells

In Internet Explorer 7 und nachfolgenden Versionen wurde das Überlaufverhalten geändert, um eine Übereinstimmung mit dem CSS 2.1-Boxmodell zu erreichen. Diese Überlaufmethode gibt an, ob Inhalte, die über die angegebenen Größeneinschränkungen hinausgehen, abgeschnitten werden. Standardmäßig werden Inhalte nicht abgeschnitten und können außerhalb der Box angezeigt werden.

In früheren Versionen von Internet Explorer wurde dieses Verhalten nicht unterstützt. Inhalte mussten immer in den definierten Bereich passen. Somit war die automatische Größenanpassung des Internet Explorer-Fensters notwendig, um die Größenanforderungen des Inhalts zu berücksichtigen. Wenn Sie beispielsweise eine Box mit einer Breite und einer Höhe von 100 Pixel erstellten, konnten Inhalte mit bis zu 100 Pixel problemlos eingegeben werden. Bei mehr als 100 Pixel wurde die Größe des Fensters jedoch automatisch angepasst, um die neuen Informationen einzuschließen.

Bei dieser Modelländerung werden jetzt alle Webseiten, die auf der früheren automatischen Größenanpassung basieren, falsch angezeigt, da Internet Explorer 7 und Internet Explorer 8 die Größeneinschränkungen nun berücksichtigen und entsprechend rendern. Dieses Verhalten wird im folgenden Codebeispiel dargestellt.


<style type="text/css">
div        { width : 100px; height: 100px; border: thin solid black;}

blockquote { width: 125px; height: 100px;
             margin-top: 50px; margin-left: 50px;
             border: thin dashed black}
cite       { display: block;
             text-align: right;
             border: none}
p          { margin: 0;}
</style>

<div>
  <blockquote>
    <p>some text long enough to make it interesting.</p>
    <cite>- anonymous </cite>
  </blockquote>
</div>

Wie zu sehen ist, erkennen spätere Versionen von Internet Explorer die Höhen- und Breiteneinstellungen einer Box an, sodass der <blockquote> -Inhalt außerhalb der Begrenzungen der übergeordneten Box gerendert wird.

CSS-Filter

Obwohl Standards wie CSS zur Verfügung stehen, stellt dies keine Garantie dar, dass alle Browser die Informationen auf die gleiche Weise rendern. Möglicherweise sind nicht alle Teile des Standards definiert, die Hersteller von Browsern implementieren Komponenten nicht auf die gleiche Art oder die vorhandenen Implementierungen sind fehlerhaft. Basierend auf den Problemen bei den Standards hat die Webentwicklercommunity CSS-Filter entwickelt. CSS-Filter nutzen Browserfehler oder nicht implementierte Features, um CSS-Formatregeln in bestimmten Browsern auszublenden. Da diese bekannten Probleme bei Standards behoben wurden, sind einige der CSS-Filter nicht mehr funktionsfähig.

Sowohl Internet Explorer 7 als auch Internet Explorer 8 verfügen über Problemumgehungen für zahlreiche zugrundeliegende Analysefehler, die eine einwandfreie Funktion der folgenden Filter in früheren Versionen von Internet Explorer verhinderten.

noteHinweis
Wenn Ihre Webseite diese Filter enthält, müssen Sie diese entfernen oder ersetzen, um eine einwandfreie Funktion sicherzustellen.

* Filter

Wird für Regeln verwendet, die ausschließlich bei Internet Explorer vorkommen. Internet Explorer 7 und nachfolgende Versionen ignorieren diese Konstrukte.


/* The following rules used to apply only to Internet Explorer, but are now ignored by versions of Internet Explorer 7 and later. */
* html{ 
}
* html body{
}

Unterstrich (_) Filter

Wird für Eigenschaften verwendet, die ausschließlich bei Internet Explorer vorkommen. Internet Explorer 7 und nachfolgende Versionen behandeln diese Konstrukte als benutzerdefinierte Eigenschaft. Das bedeutet, dass die Eigenschaft weiterhin Teil des Objektmodells ist und über ein Skript abgefragt werden kann, seinen Wert jedoch standardmäßig nicht anwendet.


/* The following rule used to apply the min-height property to Internet Explorer. In Internet Explorer 7 and later versions, _height is treated as a custom property, so no height value is applied. */
.myclass {
   min-height: 300px;
   _height: 300px;
   ...
   }

/**/ Kommentarfilter

Wird zum Ausblenden von Eigenschaften verwendet, die ausschließlich bei Internet Explorer vorkommen, wenn die "strict-mode"-Weiche (<!DOCTYPE>) verwendet wird. Zuvor konnte dieser Filter nicht im quirks-Modus eingesetzt werden. Internet Explorer 7 und nachfolgende Versionen analysieren diese Eigenschaft und wenden sie an.


/* The following rule used to hide the height property to Internet Explorer. In Internet Explorer 7 and later versions, the value is applied. */
.myclass {
      height/**/: 300px;
   ...
   }

Filter "html > body" für untergeordnete Selektoren

Wird zum Ausblenden von Deklarationen verwendet, die ausschließlich bei Internet Explorer vorkommen. Internet Explorer 7 und nachfolgende Versionen analysieren die in der Deklaration enthaltenen Eigenschaften und wenden sie an.

noteHinweis
CSS-Formatregeln, die auf untergeordneten Selektoren beruhen, werden nur dann als CSS-Filter betrachtet, wenn sie zur Erkennung bestimmter Browsertypen oder -versionen verwendet werden.


/* The following rule used to hide the height property to Internet Explorer. In Internet Explorer 7 and later versions, the value is applied. */
html > body {
      height: 300px;
   ...
   }

Filter "head + body" für benachbarte Selektoren

Wird zum Ausblenden von Deklarationen verwendet, die ausschließlich bei Internet Explorer vorkommen. Internet Explorer 7 und nachfolgende Versionen analysieren die in der Deklaration enthaltenen Eigenschaften und wenden sie an.

noteHinweis
CSS-Formatregeln, die auf benachbarten Selektoren beruhen, werden nur dann als CSS-Filter betrachtet, wenn sie zur Erkennung bestimmter Browsertypen oder -versionen verwendet werden.


/* The following rule used to hide the height property to Internet Explorer. In Internet Explorer 7 and later versions, the value is applied. */
Head + body {
      height: 300px;
   ...
   }

Filter "head:first-child + body" für direkte untergeordnete und benachbarte Selektoren

Wird zum Ausblenden von Deklarationen verwendet, die ausschließlich bei Internet Explorer vorkommen. Internet Explorer 7 und nachfolgende Versionen analysieren die in der Deklaration enthaltenen Eigenschaften und wenden sie an.

noteHinweis
CSS-Formatregeln, die direkte untergeordnete Selektoren mit benachbarten Selektoren kombinieren, werden nur dann als CSS-Filter betrachtet, wenn sie zur Erkennung bestimmter Browsertypen oder -versionen verwendet werden.


/* The following rule used to hide the height property to Internet Explorer. In Internet Explorer 7 and later versions, the value is applied. */
head:first-child + body {
      height: 300px;
   ...
   }

Wartung

Dieser Abschnitt enthält mögliche Strategien, um CSS-basierte Kompatibilitätsprobleme zu umgehen.

Probleme mit dem Standardverhalten "overflow:visible"

Wenn Sie keine Breite oder Höhe für die Box definiert haben, sollte sich das Layout weitgehend wie in Internet Explorer 6 verhalten. Ausnahmen treten nur bei langen Inhalten auf, die über den Anzeigebereich hinausgehen.

Es gibt zwei Fälle, in denen es aufgrund des neuen CSS-Verhaltens möglicherweise zu Fehlern im Layout kommen kann.

  • Wenn Sie eine Breite oder Höhe für die Box definiert haben, ohne zu merken, dass der Inhalt über die festgelegten Abmessungen hinausgeht. Beheben Sie das Problem, indem Sie die richtige Größe für den Inhalt feststellen und die korrekten Abmessungen für die Box festlegen.

  • Bei Inhalten, die die automatische Anpassung der Größe der Box erfordern. Dieser Fall tritt normalerweise auf, wenn Sie Inhalte dynamisch einfügen oder keinen Schriftgrad angeben und sich die Textgröße im Rahmen der Einstellungen des Benutzers ändern.

    Derzeit existiert eine nicht unterstützte deklarative Lösung, die die Eigenschaften für die Mindest- und Maximalbreite/höhe verwendet. Die Änderung des Überlaufverhaltens ist eine Voraussetzung für die Unterstützung dieser Eigenschaften. Microsoft arbeitet derzeit an der Implementierung dieser Eigenschaften. Solange diese noch nicht verfügbar sind, können Sie eine Skriptlösung vergleichbar mit der im folgenden Codebeispiel erstellen.

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
    <html>
    <body id=body1 onload="calc()">
    <!-- Small div with overflowing content -->
      <div id="div1" style="border: solid red 1px; width: 10px; height:10px"> Some overflow text</div>
    <!-- Providing the dimensions to the box to include the overflow content --> 
      <span id="span1" style="position:absolute;border:blue dotted 1px;display:none"></span>
    </body>
    </html>
    
    <script>
    function Rect(t, r, b, l) {
       this.top = t;
       this.right = r;
       this.bottom = b;
       this.left = l; }
    
    function Size(w, h) {
       this.width = w;
       this.height = h; }
    
    function calc() {
       // pick up the text range of the body text
       var tr = body1.createTextRange();
       // move to the element for which you are identifying the dimensions 
       tr.moveToElementText(div1);
       
       /* Returns the TextRectangle collection.
          Each rectangle has four integer properties (top, left, right, and bottom), which represent a coordinate of the rectangle, in pixels. */
    
       var rects = tr.getClientRects();
       /* we know the top left corner of the div. but we need to identify the overflow area in the bottom right corner */
    
       var textRect = unionRects(rects);
       /* generate a dummy element just to show the new border in addition to the old. You will probably want to override the given dimensions on div1 */
       span1.style.display = "block";
    
       // Get divs location on the page
       var offsetDiv1 = getOffset(div1);
       
       /* Calculate the actual dimensions starting at the upper left corner of the div and going to the size required for the overflow text */
       span1.style.height = textRect.bottom - offsetDiv1.height;
       span1.style.width = textRect.right - offsetDiv1.width;
       span1.style.top = textRect.top + offsetDiv1.height;
       span1.style.left = textRect.left + offsetDiv1.width; }
    
    function unionRects(rects) {
    
       var l = 0;
       var r = 0;
       var t = 0;
       var b = 0;
    
       for (var i = 0; i < rects.length; i++) {
    
          l = Math.min(l, rects[i].left);
          t = Math.min(t, rects[i].top);
          r = Math.max(r, rects[i].right);
          b = Math.max(b, rects[i].bottom); }
          
       return new Rect(t, r, b, l);   }
    
    function getOffset(element) {
    
       var w = document.body.offsetLeft + element.offsetLeft;
       var h = document.body.offsetTop + element.offsetLeft;
    
       for (; element.tagName != "BODY"; element = element.offsetParent)  {
          w += element.clientLeft + element.offsetLeft;
          h += element.clientTop + element.offsetLeft;}
    
       return new Size(w, h);  }
    </script>
    

Probleme mit Verbesserungen an CSS-Filtern

Wenn Ihr Webseitenlayout im standardkonformen Modus von Internet Explorer 7 oder Internet Explorer 8 nicht korrekt angezeigt wird, haben Sie zwei Optionen:

  1. Versuchen Sie einen standardbasierten, browserübergreifenden Entwurf zu erstellen. Durch Vereinfachen der Webseite können Sie das Problem möglicherweise beseitigen und gleichzeitig Ihre Wartungskosten senken.

  2. Umgehen Sie die Probleme, die nur Internet Explorer betreffen, mithilfe bedingter Kommentare. Wenn die Verwendung von CSS-Filtern erforderlich ist, ziehen Sie Filter in Erwägung, die sich nur auf ältere Browserversionen auswirken, um das Risiko künftiger Probleme möglichst gering zu halten.

Verwenden von bedingten Kommentaren

Bedingte Kommentare stellen eine einfache und vertretbare Möglichkeit zur Erkennung von Browsertyp und -version von Internet Explorer dar. Da die Syntax auf Kommentaren basiert, werden die Anweisungen von anderen Internetbrowsern ignoriert.

Verwenden Sie bedingte Kommentare, um die CSS-Filter, die sich speziell auf Internet Explorer auswirken (z. B. der HTML-Filter *) zu ersetzen. Die Wartung wird vereinfacht, wenn Sie mithilfe bedingter Kommentare eine Verknüpfung mit einem Internet Explorer-spezifischen Stylesheet herstellen.


<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="iestyles.css" />
<![endif]--> 

Verwenden von CSS-Filtern

CSS-Filter stellen eine angemessene Lösung dar, um die Unterschiede beim Verhalten von Browsern zu umgehen. Bei der Verwendung der Filter sollten Sie jedoch zwei Richtlinien berücksichtigen:

  • Nehmen Sie nur frühere Versionen von Internetbrowsern ins Visier. So stellen Sie sicher, dass der Filter auch bei neueren Browserversionen noch funktioniert. So existieren beispielsweise Filter, die sich nur auf Internet Explorer 5.5 und frühere Versionen auswirken. Ihre Verwendung ist somit relativ sicher.

  • Beachten Sie, dass die Filter bei Problemen gewartet werden müssen, wenn beispielsweise ein Sicherheitsupdate für eine frühere Betriebssystemversion bereitgestellt wird. Sie müssen auch Kommentare erstellen, die den Code eindeutig als CSS-Filter kennzeichnen.

Siehe auch

Fanden Sie dies hilfreich?
(1500 verbleibende Zeichen)
Vielen Dank für Ihr Feedback.

Community-Beiträge

HINZUFÜGEN
Anzeigen:
© 2014 Microsoft