YUI Rétablissement automatique des rendus sous les autres éléments de la page dans IE7

Question

Je travaille maintenant sur une page qui a une colonne de boîtes avec des ombres et des coins sexy et ce n'est pas le cas en utilisant l'exemple here. Je dois admettre, je ne comprends pas complètement comment fonctionne ce CSS, mais ressemble beaucoup.

A l'intérieur de la boîte la plus haute se trouve une entrée de type texte utilisée pour la recherche. Ce champ de recherche est connecté à un widget YUI autocomplete.

Tout fonctionne correctement dans Firefox3 sur Mac, FF2 sur Windows, Safari sur Mac. Dans IE7 sur WinXP, les suggestions de saisie semi-automatique s'affichent sous les cases arrondies, rendant toutes les lettres illisibles sauf la première (même si vous pouvez toujours voir assez entre les cases que je suis à l'aise, IE7 reçoit plus d'une suggestion). Où pourrais-je commencer à chercher pour corriger le problème?

Voici ce que le succès ressemble à FF2 sur Windows XP:

Et voici ce qui semble l'échec comme dans IE7:

Answer 1

La solution de travail que j'ai finalement implémentée était basée sur la lecture de this explanation encore et encore.

Dans le code HTML sous-jacent, tous les éléments de coin arrondis bleus sont des DIV et tous sont des frères et sœurs (tous les enfants de la même DIV). L'index z de la division autocomplete elle-même (qui est l'arrière-arrière-petit-fils du div diviseur de coin arrondi) peut être arbitrairement élevé, et il ne résoudra pas ce problème, car IE restait essentiellement l'ensemble contenu de la boîte de recherche ci-dessous le contenu entier de la "Vital Stats" boîte, car les deux avaient par défaut z-index, et Vital Stats était plus tard dans le HTML. L'astuce consistait à donner à chacun de ces DIVs frères (les conteneurs de coin arrondis bleus) des index z décroissants, et à les marquer tous: relative. Donc la div bleue qui contient le champ de recherche est z-index: 60, la case "Vital Stats" est z-index: 50, "Tags" est z-index: 40, et ainsi de suite. Donc, plus généralement, trouvez l'ancêtre commun à la fois de l'élément qui se chevauche et de l'élément qui se chevauche. Sur les enfants immédiats de l'ancêtre commun, appliquez les z-index dans l'ordre dans lequel vous souhaitez que le contenu apparaisse.

Answer 2

Je ne suis pas totalement comprendre la le programme d'installation est à l'origine du problème, mais vous pouvez explorer la propriété useIFrame de l'objet YUI Autocomplete - il superpose un iframe obj ect sous le champ autocomplete, qui permet au champ de flotter ensuite au-dessus des objets qui l'obscurcissent dans la mise en page buggy d'IE.

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

Mais les docs disent que cette question est importante dans 5,5 < IE < 7, donc cela pourrait ne pas être le problème que vous rencontrez. Encore une fois, sans comprendre totalement la configuration avec laquelle vous travaillez, vous pouvez également essayer d'expérimenter avec diverses valeurs z-index pour le champ de saisie semi-automatique et les éléments de niveau bloc environnants.

Answer 3

Assurez-vous que l'index z de la division auto-compléte est un nombre plus grand que les divs qui constituent la boîte d'angle arrondie. Microsoft met le z-index des éléments supérieurs à 20000 ou 100000 je crois. Peut-être sage de faire la même chose.

Answer 4

Jeremy,

Désolé pour cela étant en retard, mais nous espérons que la réponse sera utile pour vous dans un futur projet.

Le problème ici est que IE crée un nouvel ordre d'empilement à chaque fois qu'il y a un élément avec une position: relative, ce qui signifie que l'index z lui-même n'est pas le seul facteur de contrôle. Vous pouvez en savoir plus sur ce ici:

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

Pour résoudre le problème, si je comprends bien votre problème correctement, appliquez la position: par rapport au conteneur qui enveloppe l'ensemble de votre mise en œuvre de saisie semi-automatique (et position: absolute à votre conteneur de résultats). Cela devrait créer un ordre d'empilement indépendant dans IE pour les éléments qui leur permettent de flotter sur l'autre position: les piles relatives qui apparaissent plus tard dans la page.

Cordialement, Eric

Answer 5

moi avons eu un problème similaire à cela, je l'ai fixé par fondamentalement juste changer z-index pour les différents divs. Il suffit de définir un nombre plus élevé pour chaque div dans l'ordre qu'il doit afficher.