Question

我正在开发一个非常小的网站，它有一个固定的底部导航栏和居中的内容。我的内容在每个页面之间移动了一些问题。

这是网站： http://imsja.com/test/index.html

和CSS：http://imsja.com/test/ims.css

到目前为止，

索引，哲学，服务和联系我们页面已上传。关于哲学和服务，我知道由于滚动条，内容正在发生变化。但内容也在索引和联系我们页面之间移动（两者都没有滚动条）。

有什么建议吗？

Answer 1

我认为导航的宽度应该是静态的，不能移动

#navigation { width: 100%; ->example 1345px or else as you prefer }

Answer 2

这是因为你在“主动”链接上有不同的风格。为了防止移位，您应该为#navigation > a元素提供固定的宽度：

#navigation>a{
    display: inline-block; // width won't work on anchors without this
    width: 150px;          // just for example
}

此外，“PORTFOLIO”，“TEAM”和“WHAT'NE NEW”页面没有在相应的锚点上应用活动样式，我认为你应该先修复它们。

Answer 3

我建议使用CSS重置。

http://meyerweb.com/eric/tools/css/reset/

此外，Chrome也会显示您的自定义字体未加载，因为我收到此错误。

Failed to load resource: the server responded with a status of 403 (Forbidden) http://use.typekit.net/c/6ed047/myriad-pro:n9:i9:n7:i7:i4:n4:n6:i6.Xbt:F:2,…6bdfc67868a14a7e75bc1db57140ed45ade213a3fcababd522e3dc685922facee8394858fe

我注意到的第一件事是字体看起来大小不同。这可能使事情看起来像是在转移。

Answer 4

我会改变你的导航块以拥有这样的持有人：

    <div id="navigation">
      <div id="nav-holder">
        <a href="/philosophy.html"><span class="activedropcap">P</span><span class="active">HILOSOPHY</span></a>
        <a href="/services.html"><span class="dropcap">S</span>ERVICES</a>
        <a href="/portfolio.html"><span class="dropcap">P</span>ORTFOLIO</a>
        <a href="/team.html"><span class="dropcap">T</span>EAM</a>
        <a href="/blog.html"><span class="dropcap">W</span>HAT'S <span class="dropcap">N</span>EW</a>
        <a href="/contact.html"> <span class="dropcap">C</span>ONTACT <span class="dropcap">U</span>S </a>
        <div id="rule"><!-- hr-->
        <img src="images/rule.png" width="750" height="5"></div>
      </div>
    </div>

然后，您可以添加样式以集中它

    #navigation #nav-holder {
      width: 735px;
      margin: 0px auto;
    }

从#navigation a：

中删除这些内容

    padding-left: 5px;
    padding-right: 5px;
    width: 115px;

将此添加到#navigation a：

的末尾

    float: left;
    line-height: 30px;
    padding: 0 25px;

HTML页面转换（不是滚动条问题！）

4 个答案: