为什么此页面的内容会向左/向右移动几个像素？答案

【问题标题】：Why does the content of this page shift a few pixels to the left/right?为什么此页面的内容会向左/向右移动几个像素？
【发布时间】：2010-10-30 15:08:29
【问题描述】：

我正在使用“居中的页眉/页脚/2 列 CSS”布局。

在 test1.htm 中，如果它们是最少的页面内容并且页面页脚在浏览器窗口中完全可见，那么当您单击 test2.htm 时，页面内容会向左移动。

如果 test1.htm 有足够的内容将页脚推离浏览器窗口的底部，那么当您单击 test2.htm 时，页面内容将保持静态。

谁能帮助解决这个 css 问题？

test1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

<style type="text/css">

body, html 
{
    margin:0;
    padding:0;
    font-size: 1em;
  font-family:  Verdana, Arial, Helvetica, sans-serif;  
}   

#wrap 
{
    width:912px;
    margin:0 auto;
    background:Green;
}

#header 
{
    background-color:Gray;
    height: 120px;
}

#leftColumn 
{
    float:left;
    width:230px;
    padding: 0 10px 10px 10px;
    background:Red;
}

#rightColumn 
{
    float:right;
    width:642px;
    padding:10px;
    background:#fff;
    font-size: 0.7em;
    color: #828589;
}

#footer 
{
    clear:both;
    padding:5px 10px;
    background-color:Gray;
}



</style>    

</head>


<body>
  <div id="wrap">
    <div id="header">
      <div id="nav">
       <a href="test1.htm">test1</a> <a href="test2.htm">test2</a> 
      </div>
    </div>
    <div id="leftColumn">
      <p>
      left column
      </p>   
      <br /><br /><br /><br /><br /><br />
    </div>
        <div id="rightColumn">
          <div id="PageContent">

      <!-- START PAGE CONTENT -->

        <h1>Page Title </h1>
        <h4>"test 1 "</h4>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...
        <!-- 
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        -->

      <!-- END PAGE CONTENT -->
      </div>



    </div>
    <div id="footer">

      the footer

    </div>
  </div>
</body>
</html>

test2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

<style type="text/css">

body, html 
{
    margin:0;
    padding:0;
    font-size: 1em;
  font-family:  Verdana, Arial, Helvetica, sans-serif;  
}   

#wrap 
{
    width:912px;
    margin:0 auto;
    background:Green;
}

#header 
{
    background-color:Gray;
    height: 120px;
}

#leftColumn 
{
    float:left;
    width:230px;
    padding: 0 10px 10px 10px;
    background:Red;
}

#rightColumn 
{
    float:right;
    width:642px;
    padding:10px;
    background:#fff;
    font-size: 0.7em;
    color: #828589;
}

#footer 
{
    clear:both;
    padding:5px 10px;
    background-color:Gray;
}

* html #footer {
    height:1px;
}  



</style>    

</head>


<body>
  <div id="wrap">
    <div id="header">
      <div id="nav">
       <a href="test1.htm">test1</a> <a href="test2.htm">test2</a>  
      </div>
    </div>
    <div id="leftColumn">
      <p>
      left column
      </p>   
      <br /><br /><br /><br /><br /><br />
    </div>
        <div id="rightColumn">
          <div id="PageContent">

      <!-- START PAGE CONTENT -->

        <h1>Page Title </h1>
        <h4>"test 2 "</h4>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

      <!-- END PAGE CONTENT -->
      </div>



    </div>
    <div id="footer">

      the footer

    </div>
  </div>
</body>
</html>

【问题讨论】：

您检查是否是浏览器问题？
发生在 IE 和 Firefox 上，下面的答案看起来是正确的，我只是在考虑 David Dorwards 建议的解决方案。

标签： jquery html css

【解决方案1】：

听起来第一页足够短，可以在没有滚动条的情况下显示，而第二页则不然。

滚动条占用空间，因此画布较窄，因此画布的中心离滚动条更远。

解决方案要么使用溢出来一直显示滚动条（我不建议这样做，它在无法滚动时提供滚动）或使用左对齐设计（如大多数 WWW）

【讨论】：

我认为大多数网络都有一个固定宽度的容器，以屏幕设计为中心。不是我最喜欢的，但肯定是世界。

【解决方案2】：

发生这种情况是因为 test2.htm 右侧有滚动条 -> 这使得 test2.htm 的宽度小于 test1.htm 的宽度 -> 居中的内容位置由采用不同宽度值的浏览器计算 => 这就是为什么离开每种情况下的位置都不一样...

【讨论】：

【解决方案3】：

#wrap div 左侧和右侧的自动边距导致整个内容以正文的可用宽度居中。在 test2 中，可用宽度因滚动条的出现而减小，因此内容似乎向左移动了滚动条宽度的一半。

【讨论】：

【解决方案4】：

所以看起来内容更多的页面会强制浏览器窗口有一个滚动条，这反过来又会将居中的 div 推向左侧，因为滚动条的出现减少了可用区域。

因此可能的解决方案是没有居中的 div，即将包装 id css 更改为

#wrap 
{
    width:912px;
    margin:0 0 0 0;
    background:Green;
}

这看起来不太适合我正在使用的东西。

另一个解决方案是溢出，即添加这个

  html
  {
    overflow:scroll;    
  }

这实际上看起来不错，所以可能会使用它。

我确实找到了另一个基于this 的使用 JQuery 的解决方案

将#wrap 更新为

#wrap 
{
    width:912px;
    margin:0 0 0 0;
    background:#fff;
        visibility: hidden;
}

然后在每个页面中使用以下内容

  <script type="text/javascript">
    jQuery.fn.center = function() {
      this.css("position", "absolute");

      // Use This line On 'Short Page Content'
      this.css("left", ($(window).width() - (this.width()+18)) / 2 + $(window).scrollLeft() + "px");

      // Use This line On 'Long Page Content'
      this.css("left", ($(window).width() - (this.width())) / 2 + $(window).scrollLeft() + "px");


      return this;
    }

    $(document).ready(function() {
      $('#wrap').center();
      $('#wrap').css("visibility", "visible");
    });

  </script>

【讨论】：

【解决方案5】：

既然你要做的就是让滚动条始终可见，为什么还要这样做！

html{
   height:101%;
}

【讨论】：

【解决方案6】：

最好不要担心滚动条。您正在修复一个不存在的“问题”。每个居中的网站都有同样的问题。

这是“预期行为”，您的用户都不会注意到您的页面向左移动了几个像素——尤其是在页面刷新时。

想一想——您是否曾在其他网站上注意到这一点？

【讨论】：

【解决方案7】：

height: 100%;
overflow-y:scroll;

【讨论】：

【解决方案8】：

对于我的网站，Safari 中的页面之间没有“摆动”——我只在 Firefox 中注意到了这一点，而 Paul Rowland 使用 overflow: scroll 的建议非常有效，因为该网站在 Safari 中不受影响，但在 Firefox 中得到了纠正。非常有帮助，谢谢！

我不敢相信在这个网站上，诸如“别担心”之类的建议不会被否决。

【讨论】：

【解决方案9】：

非常感谢，伙计们。今晚我遇到了同样的文本转换问题，很幸运能找到这个网站和你的上述建议。

我的两个页面的行为方式相同——一个创建了滚动条，另一个没有。通过将以下代码添加到 style.css 文件中解决了文本移动问题：

html { overflow:scroll; }

【讨论】：

【解决方案10】：

如果您正在加载 javascript 以显示类似 facebook 的按钮或类似的其他来源，则页面将加载放置在那里的 facebook div，然后再次摆脱它，从而导致转变。尝试使用 css 进行修复，为 facebook/whatever div 设置高度。

【讨论】：