jQuery offset() ne fonctionne pas dans certains navigateurs, sur certains ordinateurs

Question

J'ai un problème pour positionner un élément dans certains navigateurs. J'utilise la saisie semi-automatique jQuery trouvée here. La div contenant les valeurs de saisie semi-automatique doit être directement sous la zone de texte et s'aligner parfaitement. Le code définit le code CSS gauche propriété de la div en utilisant la propriété gauche générée par $(textbox).offset();

Après DÉBALLAGE le code pour essayer de résoudre mon problème, je reçois ceci:

var a = $(textbox).offset(); 
element.css({ 
    width: typeof e.width == "string" || e.width > 0 ? e.width : $(textbox).width(), 
    top: a.top + textbox.offsetHeight, 
    left: a.left 
}).show(); 

Cela semble que ce devrait fonctionner, et cela fonctionne dans Firefox. Cela ne fonctionne pas dans IE8, Chrome. La position du haut est toujours correcte, mais parfois la div est trop loin vers la gauche, ou trop loin vers la droite.

Sur différents ordinateurs (tous avec Windows XP), cela fonctionne dans IE8 ... comment cela peut-il être? Je l'ai également testé sur mon Mac, OS 10.5. Cela fonctionne dans Firefox, mais pas Safari.

J'ai désactivé les plug-ins, changé les résolutions d'écran, redimensionné les fenêtres ... Il fonctionne parfois de façon incohérente dans certains endroits parfois.

Quelqu'un peut-il penser à quelque chose qui me manque?

MISE À JOUR: J'ai retravaillé mon code pour utiliser la saisie semi-automatique fourni avec jQuery et jQuery UI 1.8rc3 1.4.2. C'est toujours cassé, même problème. S'il vous plaît aider!

MISE À JOUR 2: Voir this related question. Les interruptions de saisie semi-automatique jQuery UI s'expliquent par l'utilisation de l'offset. Est-ce que quelqu'un a un travail autour?

Voici le javascript de la fonction de saisie semi-automatique de l'interface utilisateur qui trébuche:

.css({ top: (offset.top + this.element.height) + 'px', left: offset.left + 'px' }) 

Si elle est changée en top: '0px', left: '0px' il fonctionne très bien, mais il est évidemment placé au mauvais endroit.

Answer 1

J'ai finalement compris ce qui se passait. J'ai eu une règle définissant la largeur css du corps:

body { 
    width: 900px; 
} 

Une fois que je l'ai changé cela width: 100%; et la page entière enfermai dans une div de largeur 900px, cela a fonctionné comme prévu.

Il semble que IE utilise l'élément body pour mesurer les valeurs supérieure et gauche pour offset(), mais utilise le bord de la fenêtre pour mesurer les distances supérieure et gauche lors du positionnement absolu d'un élément.

J'espère que cette réponse sauvera quelqu'un d'autre tout le temps que je l'ai perdu sur ce ...

Answer 2

j'ai rencontré une question similaire, finalement découvert la propriété float affecte relative, ce qui rend la relative div pas stable dans Internet Explorer 8 mais fonctionne bien dans Firefox.