Question

我的导航div中的页面链接（nav_btns）仅在联系页面上向下移动。在页面加载时，在3种不同的浏览器（Chrome，Firefox，IE9）中出现问题，并且不依赖于页面滚动或调整大小。我似乎无法在堆栈或谷歌上找到我的解决方案，这让我觉得这是一个愚蠢的疏忽。如果是这样，我会提前道歉，但我准备面对我的键盘。

我正在从这个网站和其他人那里学习，所以我希望代码清晰可辨。我现在让网站上线：http://ephelan.com

尝试：合并样式表，调整iframe＆amp;联系人大小，请求网络讲师/学生

Answer 1

您的联系人页面上的doctype和HTML声明与您的所有其他网页不同。也许是愚蠢的疏忽，但它可能发生在任何人身上。：）

Answer 2

contact.html中的doctype是

<!DOCTYPE HTML>

vs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在其他人中。

Answer 3

问题是你的div与s页脚的兄弟元素的总高度是不同的。所以，更具体地说......

从这里开始：http://ephelan.com/index.html

<div id="content">

  <!-- TOTAL HEIGHT OF 391 PIXELS -->
  <ul id="accordion-slider" style="width: 806px; height: 261px; ">
    <!-- some more stuff -->
  </ul>
  <div id="quote">
    <!-- some stuff -->
  </div>

  <div id="footer">
    <!-- contents of footer element -->
  </div>
</div>

现在将其与您的联系页面进行比较：http://ephelan.com/contact.html

<div id="content">

  <!-- TOTAL HEIGHT OF 396 PIXELS -->
  <div id="contactbox">
    <!-- Some other content -->
  </div>

  <div id="footer"> 
    <!-- Footer content... -->
  </div>
</div>

注意计算（总）高度的差异。因为页脚div上方的内容高出5个像素，所以它会将页脚推到比其他页面低5个像素的位置。

要解决此问题，所有页面的结构应该是这样的......

<div id="content">
  <div class="crap-above-footer-or-whatever-you-want-to-call-it">
    <!-- All of your crap -->
  </div>
  <div class="footer">
    <!-- Footer contents -->
  </div>
</div>

然后，在“废话上面的页脚 - 或者你想要打电话的它”类中，确保设置一个高度，并且这个高度足够大以容纳其所有内容，无论您正在查看哪个页面。

Div向下移动一页

3 个答案: