防止出现滚动条时居中布局移动其位置

我的页面布局看起来像这样的东西 http://jsfiddle.net/salman/qxywp/show/:

<style type="text/css">
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>

<div id="content-wrap">
</div>

您会注意到，当垂直滚动条出现时，内容换行 div 的位置稍微移动了一点。一种情况是当浏览器开始逐步呈现页面而不显示垂直滚动条，然后确定需要滚动条，因为内容比“折叠”高。这会将 div 向左移动约 10px。

解决这个问题的最佳方法是什么而不强制浏览器始终显示滚动条？

恐怕解决这个问题的最好方法是强制滚动条始终可见html {overflow-y: scroll;}。您遇到的问题是，当滚动条出现时，“可用区域”会缩小 10 px。这会导致左侧计算出的边距缩小滚动条宽度的一半，从而将居中的内容稍微向左移动。

一个可能的解决方案可能是使用 JavaScript 来计算边距，而不是使用margin: 0 auto;并以某种方式补偿滚动条出现时“丢失”的像素，但我担心它会很混乱，并且在计算和应用新边距时内容可能会移动一点。