YUI automatische Vervollständigung macht unter anderen Seitenelementen in IE7

Question

Ich arbeite jetzt auf einer Seite, die eine Spalte von Kästen gestylt mit sexy Schatten und Ecken und so weiter am Beispiel hier . Ich muss zugeben, ich verstehe nicht ganz, wie das CSS funktioniert, aber es sieht groß.

Innerhalb der obersten Box ist ein Text-Typ-Eingang verwendet für die Suche. Das Suchfeld ist verdrahtet zu einem YUI zum automatischen Vervollständigung Widget.

Alles funktioniert in Firefox3 auf Mac, FF2 auf Windows, Safari auf dem Mac in Ordnung. In IE7 auf WinXP, machen die Autocomplete-Vorschläge unter den abgerundeten Ecken Boxen, so dass alle, aber die erste unlesbare (obwohl man immer noch genug späht zwischen den Boxen sehen, dass ich bequem IE7 wirklich mehr als ein Vorschlag bekommt).

Wo könnte ich anfangen zu suchen, das Problem zu beheben?

Hier ist, was Erfolg wie in FF2 auf WinXP aussieht:

Und hier ist es, was Versagen wie in IE7 aussieht:

Answer 1

Die Arbeitslösung I wurde schließlich umgesetzt basierend diese Erklärung immer und immer wieder .

In dem zugrundeliegenden HTML, alle blauen gerundeten Eckelemente sind DIVs, und sie sind alle Geschwister (alle Kinder des gleichen DIV).

Der Z-Index des Autocomplete div selbst (das ist die Ur-Ur-Enkel der abgerundeten Ecke div-Containers ist) kann beliebig hoch sein, und es wird dieses Problem nicht beheben, weil IE im Wesentlichen den gesamten Inhalt Rendering wurde neben dem Suchfeld unten den gesamten Inhalt der "Vital Stats" -Box, denn beide hatten Standard-z-Index und Vital Stats war später im HTML.

Der Trick war jeder dieser Geschwister DIVs zu geben (die blauen abgerundete Ecke Container) absteigend z-Indizes und alle von ihnen Position markieren: relative. So ist die blaue div, die das Suchfeld enthält, ist z-index: 60, die "Vital Stats" -Box ist z-index: 50, "Variablen" ist z-index:. 40, und so weiter

So ganz allgemein finden die gemeinsamen Vorfahren beide das Element, das und das Element überlappt zu werden, die überlappend ist. Auf den unmittelbaren Kinder des gemeinsamen Vorfahren gelten z-Indizes in der gewünschten Reihenfolge Inhalt wollen zeigen.

Answer 2

Jeremy,

Es tut sie dies so spät, aber hoffentlich wird die Antwort sein für Sie von Nutzen in einem zukünftigen Projekt.

Das Problem hierbei ist, dass der IE, um eine neue Stapel schafft jederzeit über ein Element mit Position ist: relativ, was bedeutet, dass z-Index selbst nicht der einzige bestimmende Faktor ist. Sie können mehr über diese lesen Sie hier:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Um das Problem zu lösen, wenn ich dein Problem richtig zu verstehen, anwenden Position: in Bezug auf die Behälter, die Ihre gesamte Implementierung der automatische Vervollständigung wickeln (und dann position: absolute, um Ihre Ergebnisse Container). Das sollte eine unabhängige Stapelreihenfolge in IE für diese Elemente erstellen, die sie über die andere Position schweben lassen. Relativ Stapel, die später in der Seite erscheinen

Viele Grüße, Eric

Answer 3

Ich bin nicht total zu verstehen, um das Setup, die das Problem hinführt, aber Sie könnten die useIFrame Eigenschaft des YUI automatische Vervollständigung Objekt erkunden wollen - es Schichten ein iframe-Objekt unter dem Autovervollständigen-Feld, der es ermöglicht das Feld dann über die Objekte zu schweben, die es in IE Buggy Layout verschleiern.

http://developer.yahoo.com/yui /docs/YAHOO.widget.AutoComplete.html#property_useIFrame

Aber die docs sagen, dass dies wichtig ist in 5,5

Machen Sie den Z-Index des auto-complete div sicher eine größere Zahl als die divs ist, der die abgerundete Ecke Box bilden. Microsoft stellt den Z-Index der Top-Elemente zu 20000 oder 100000, glaube ich. Könnte klug sein, das gleiche zu tun.

Ich hatte ein ähnliches Problem auf diese, ich habe es im Grunde fixierte nur z-index für die verschiedenen divs zu verändern. Nur höhere Anzahl Einstellung für jedes div in der Reihenfolge sollte es angezeigt werden soll.

Answer 4

Answer 5

Ich hatte ein ähnliches Problem auf diese, ich habe es im Grunde fixierte nur z-index für die verschiedenen divs zu verändern. Nur höhere Anzahl Einstellung für jedes div in der Reihenfolge sollte es angezeigt werden soll.