slideDown () fait tout déplacement emballage

Question

Je suis en train de créer un menu simple où il y a plusieurs noms de services et un utilisateur peut cliquer sur un seul et jQuery montreront qu'il est le paragraphe correspondant décrit ci-dessous il. Mon code jQuery est très bien et fait exactement ce que je veux, cependant, j'ai un bug je n'ai pas encore gommer.

Chaque fois que je clique sur un de ces titres et il est affiche la description, tout dans l'emballage pour les quarts de travail de page à la gauche à environ 7 pixels dans Firefox, il fait la même chose est Google Chrome mais je ne l'ai pas mesuré la amout mais je suis vous qu'il est hors de propos.

Quoi qu'il en soit, je suis en utilisant la commande slideToggle () pour afficher le parragraph caché. Je suppose que ce phénomène se produit parce que quand le slideDown se produit, il est en train de changer en quelque sorte la largeur de tout et la « margin: 0 auto; » réglage de la règle d'emballage dans mon css compense ce changement. Quelqu'un at-il une manière que je peux remédier à ce problème? Je l'ai essayé plusieurs autres corrections que j'ai trouvé autour de l'Internet, mais en vain.

Voici ce que mon apparence de code comme, je l'ai mis sur jsFiddle pour le rendre plus facile à visualiser: http: // jsfiddle.net/vcH7m/ ne hésitez pas à l'éditer si vous voulez, ou poster ce qui doit être fixé ici. Quel que soit plus pratique. Merci beaucoup pour l'aide!

Answer 1

Ce décalage est probablement causée par la barre de défilement vertical. Si la page est trop grand, alors la barre de défilement vertical affichera et pousser la largeur un peu de paragraphe plus à gauche. Vous pouvez voir ce bon dans le 1er paragraphe de la page jsFiddle donnée lorsque vous réduisez la fenêtre du navigateur à environ 1000x600.

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

html {
    overflow-y: scroll;
}