slideDown() fait tout passer en wrapper

Question

Je crée actuellement un menu simple où il y a plusieurs noms de services et un utilisateur peut cliquer sur un et jQuery montrera son paragraphe correspondant le décrivant en dessous. Mon code jQuery est bon et fait exactement ce que je veux, cependant, j'ai un bug que je n'ai pas encore résolu. Chaque fois que je clique sur l'un de ces en-têtes et ses affichages de description, tout dans l'emballage de la page déplace vers la gauche environ 7 pixels dans Firefox, il fait la même chose que Google Chrome mais je n'ai pas mesuré Je suis sûr que ce n'est pas pertinent.

De toute façon, j'utilise la commande slideToggle() pour afficher le parragraph caché. Je suppose que cela se produit parce que lorsque le slideDown se produit, il est en quelque sorte en train de changer la largeur de tout et la "marge: 0 auto;" le réglage de la règle d'encapsulation dans mon CSS compense ce changement. Quelqu'un at-il un moyen de remédier à ce problème? J'ai essayé plusieurs autres corrections que j'ai trouvées sur internet mais en vain.

Voici à quoi ressemble mon code, je l'ai mis sur jsFiddle pour le rendre plus facile à voir: http://jsfiddle.net/vcH7m/ N'hésitez pas à le modifier si vous le souhaitez, ou postez ce qui doit être corrigé ici. Quoi de plus pratique. Merci beaucoup pour l'aide!

Answer 1

Ce décalage est probablement causé par la barre de défilement verticale. Si la page devient trop grande, la barre de défilement verticale apparaîtra et poussera un peu plus la largeur du paragraphe vers la gauche. Vous pouvez voir ce bon dans le 1er paragraphe de la page jsfiddle donnée lorsque vous rétrécissez la fenêtre du navigateur à environ 1000x600.

Pour résoudre ce problème, vous pouvez envisager de positionner une barre de défilement verticale fixe.

html { 
    overflow-y: scroll; 
}