Liste Marker werden im IE7 nicht angezeigt

November 5

Internet Explorer 7 (IE7) ist eine herausfordernde Plattform für Web-Entwickler, weil es langsam, neue Standards zu umarmen und streng die Einhaltung dieser Standards. Designern, die verwendet werden, um die Intuition von anderen Browsern wie Firefox oder Opera können durch Probleme im Zusammenhang mit einigen der IE inhärente Funktionalität beim Testen von Webseiten frustriert werden. Das Konzept "Layout" im Internet Explorer wird oft durch Eigenschaften in Ihrer kaskadierenden Stylesheets ausgelöst. Liste Marker und Kugeln haben eine Tendenz zu verschwinden, wenn IE "HasLayout" für das Element gilt, aber es Möglichkeiten gibt, dieses Problem zu bekämpfen, die in allen Browsern funktionieren.

Was ist "HasLayout"?

Jeder Browser hat eine eigene Mittel der Berechnung einer Webseite HTML und Stile, um zu bestimmen, wie sie angezeigt werden sollen. "Layout" ist eine solche Funktion in Internet Explorer, die bestimmte Tags auswertet und dann zieht sie sich im Verhältnis zu anderen Elementen auf der Seite. Listenelemente betroffen sind, bedeutet dies in der Regel einen Kasten um die Liste zu erstellen. Wenn die "HasLayout" Logik und Browser Standardstile wo Ihr Stylesheet keine Prävention enthält zum Feld angewendet werden, werden die Liste Marker am Rande Feld, dass sie zu "verschwinden." abgeschnitten werden

Häufige Auslöser

"Float" gehört zu den Eigenschaften, die bewirkt, dass IE "HasLayout" auf ein Element anwenden, die wiederum hinzufügen, wird ein "Display: Block" Eigenschaft der Liste style automatisch, auch wenn Sie keinen expliziten Stil Ihre Stylesheets hinzugefügt haben. Block-Elemente zeigen keine Formatvorlagen standardmäßig so dass bis Sie entweder der Schwimmer oder die Display-Eigenschaft zurücksetzen, Ihre Markierungen nicht angezeigt werden.

Kompatibilitätspatches

Eine schnelle Lösung, wenn Sie Ihre Float-Eigenschaft beibehalten möchten, ist das Hinzufügen einer "Display: Inline" Eigenschaft zu Ihrer Liste Element Art. Der Inlinewert funktioniert möglicherweise nicht in geordnete Listen, in welchem Fall der Schwimmer entfernen oder setzen auf "none". Zum Beispiel:

UL li {}Float: Left;Breite: 50 %;Zeilenhöhe: 36px;List-style-image:URL(Images/Icon.png);Display: Inline;}

OL {}List-Style-Type: none;Float: none;}

OL li {}Zeilenhöhe: 36px;List-style-image:URL(Images/Icon.png);Rand Links: 20px;}

Definieren, breiten oder Höhen, Einstellung "Überlauf" oder "zoom" und verwenden das "Position: Absolute" führt Eigenschaft auch zu Problemen. Um sie zu überwinden, müssen Sie "mindestens eine der Eigenschaften Problem auf einen Standardwert zurücksetzen". Beispielsweise legen Sie Höhe oder Breite auf "Auto," schwimmen auf "none" oder überläuft zu "sichtbar".

Unterstützten Eigenschaften

IE7 und früheren Versionen enthalten nur teilweisen Unterstützung für die volle Palette von Listentypen Stil in CSS verfügbar. Wenn Sie einen Eigenschaftswert, der nicht unterstützt wird verwenden, wird nichts angezeigt. Wie CSS-Referenz von Sitepoint, unter "InternetExplorer für Windows-Versionen bis zu und einschließlich 7 unterstützen nicht die Werte 'europäisch', 'Dezimal-führende-Null', 'georgische' oder"untere-Griechisch." Auch unterstützen sie die Werte 'Lower-Latin' oder "obere-Latein," Obwohl sie unterstützen die alternativen Formen 'Lower-Alpha' und 'obere-Alpha.' "

Verwendung von Bildern als Marker

Es ist, zwar kein todsicheres Fix für fehlende Markierungen im IE7 wegen "HasLayout"-Ausgabe unterstützt ein Bild zuweisen, wie Ihre List-Style-Type oder Liste Elementhintergrund eine alternative zur Darstellung von Markern ist ohne sich Gedanken über Listenformatvorlagen. Allerdings gelten die gleichen Regeln bezüglich Schwimmern und Blöcke. Bilder dürfen verwendet werden in zwei Möglichkeiten, entweder auf der obersten Ebene mit "List-Style", Ebene oder der Liste Element mit "Hintergrund." Zum Beispiel:

UL {List-Style: url("images/bullet.gif") keine-Repeat;}

Oder: