2010-04-06 7 views
0

Après avoir parcouru et trouvé beaucoup de bugs je n'ai toujours pas trouvé une description du problème que j'ai.IE montrant div caché dans certaines circonstances

La situation initiale est une situation standard. Nous avons une info-bulle qui est en fait une div cachée qui sera affichée au passage de la souris à un endroit donné. La div est cachée avec display: none et contient une table avec le contenu. Nous avons essayé différentes bibliothèques pour montrer le div (scriptaculous et jQuery Cluetip) mais l'effet est le même.

Le problème: Tout va bien tant que le contenu correspond à la largeur de ma fenêtre. Mais quand je le redimensionne jusqu'à ce que la barre de défilement horizontale soit activée, le contenu du div masqué sera affiché à la fin de la page lorsque l'info-bulle est activée.

Ceci est vraiment étrange car cela se produit uniquement dans ces conditions. Lorsque plus d'une info-bulle est impliquée, le navigateur peut même tomber en panne (et sous Vista prend tout le système avec lui duh).

Je sais que c'est un peu compliqué à expliquer mais j'espère que quelqu'un au moins avait entendu parler de ce bug et peut me diriger dans la bonne direction.

+2

Vous devrez peut-être poster un code. Vous ne devriez pas avoir besoin de bibliothèques pour montrer la div, vous pouvez le faire avec CSS simple, donc je me méfie. – NibblyPig

+0

Où se trouve l'info-bulle DIV dans votre code HTML? Au milieu ou à la fin? –

+0

Est-ce le problème * où * l'info-bulle apparaît? vous dites 'le contenu de la div cachée sera montré à la fin de la page quand l'info-bulle est activée'. N'est-ce pas div * supposé * être affiché lorsque l'info-bulle est activée? – Segfault

Répondre

0

La façon dont j'ai fait mon info-bulle est d'utiliser la visibilité cachée et visible. Une fois que la souris est éteinte, je mets les x et y à 0 pour déplacer l'info-bulle hors de l'espace de visualisation.

Cela ne fonctionne que si la position est définie sur absolu.

Edit: Comment avez-vous positionner l'info-bulle en montrant:

I positionné l'infobulle en changeant les valeurs de css « top » et « gauche ».

box.css ("gauche, e.pageX + 1);
box.css (" top », e.pageY + 1);

Où e 'est mon événement variable à partir de:

mousemove (function (e) {});

+0

Comment avez-vous positionné l'info-bulle lorsque vous l'avez montré? Je pense que c'était le point pour utiliser les bibliothèques afin que nous puissions le positionner facilement par le pointeur de la souris. – user310148

+0

J'ai positionné l'info-bulle en changeant les valeurs css de "top" et "left". Vous pouvez récupérer la position de la souris en utilisant la variable d'événement appelée dans la fonction. mousemove (fonction (e) { box.css ("gauche", e.pageX + 5); box.css ("haut", e.pageY + 1); } – stan

0

Définition de la propriété width css "auto" (défini dans le W3C standard) dans IE entraînera l'élément <div> à prendre tout l'espace qui lui est alloué. Si l'élément <body> n'a pas de width appliqué, cela peut entraîner une page de plusieurs kilomètres. Cela bloque souvent le navigateur, en fonction du système d'exploitation. La meilleure option est simplement de le définir à null à la place.

(Ceci est basé sur le codage d'expérience réel pour IE6 et ne peut pas nécessairement s'appliquer à IE7 +). Une autre chose à garder à l'esprit est que la plupart des navigateurs font ce qu'on appelle un «rendu paresseux», ce qui signifie que si un élément est caché sur la page, il ne le rendra pas. Il ne reconnaîtra même pas son existence comme un objet potentiellement visible tant qu'il ne sera pas caché. Cela signifie que vous n'avez aucune idée de la taille de cet objet jusqu'à ce que vous le révéliez. Cela peut causer des problèmes si vous essayez de déterminer la taille de une fois que vous l'aurez rendu visible. Fondamentalement, le seul moyen de le contourner est de l'afficher, de lire sa taille, de le masquer à nouveau, puis de continuer.

+0

Le problème n'est pas et la page sans fin Le div n'a pas de largeur mais la table à l'intérieur est définie sur 100%. – user310148

Questions connexes