SlideDown() 使包装器中的所有内容发生移位

Question

我目前正在创建一个简单的菜单，其中有多个服务名称，用户可以单击其中一个，然后 jQuery 将在其下方显示描述它的相应段落。我的 jQuery 代码很好，并且完全符合我的要求，但是，我有一个尚未解决的错误。

每当我单击其中一个标题并显示其描述时，在 Firefox 中，页面包装器中的所有内容都会向左移动约 7 个像素，在 Google Chrome 中也会做同样的事情，但我还没有测量过该数量，但我确信它是无关紧要。

无论如何，我使用 SlideToggle() 命令来显示隐藏的段落。我认为发生这种情况是因为当发生 SlideDown 时，它会以某种方式改变所有内容的宽度和“margin：0 auto;”我的 css 中包装器规则的设置是为了补偿此更改。有谁有什么办法可以解决这个问题吗？我尝试了在互联网上找到的其他几个修复方法，但没有成功。

这是我的代码的样子，我将其放在 jsFiddle 上以便更容易查看： http://jsfiddle.net /vcH7m/ 如果您愿意，请随意编辑它，或者在此处发布需要修复的内容。哪个更方便。非常感谢您的帮助！

Answer 1

这种移动可能是由垂直滚动条引起的。如果页面太大，则会显示垂直滚动条并将段落的宽度向左推一点。当您将浏览器视口缩小到大约 1000x600 时，您可以在给定 jsfiddle 页面的第一段中看到这一点。

要解决此问题，您可以考虑放置固定的垂直滚动条。

html {
    overflow-y: scroll;
}