html - 页脚不会停留在 IE 兼容模式(无法在任何地方找到答案)

Question

这是网站:

http://www.uiowa.edu/~ucoll/academicmisconduct.shtml

当我进入兼容模式时，我的页脚会跳到页眉的底部。我有一个包装，其中包含一个虚拟包含的页眉，然后是一个内容区域，然后是一个虚拟包含的页脚 (fs-footer)。我很确定这与 min-height 元素有关。我尝试了很多解决方法和替代方案。我也搜索过谷歌和论坛，但没有找到好的答案。请帮助:)

代码:

html {
 height: 100%;

}

body {
 padding: 0;
 margin: 0 0 0 0;
 font-family: Lucida Grande, Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 background-color:#999;
 background-position:center;
 height: 100%;
}

#wrap {
 width: 1024px;
 height:100%;
 margin: auto;
 padding: 0;
 min-width: 1024px;
 position: relative;
}

#mainContentPage {
 background-image: url(images/backgrounducContent.png);
 background-repeat:no-repeat;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 width: 1024px;
 margin: 0;
 float: right;
 border-bottom:thick;
 border-bottom-color: #000;
 background-color: #FFF;
 min-height: 100%;
}

.fs-footer {
 clear:both;
 float:left;
 padding-bottom:30px;
 padding-top:0px;
 width:1024px;
 border-top:thick;
 border-top-color:#000;
 border-top-style:groove;
 border-top-width:thick;
 background-color:#FFF;
 background-image:url(images/ucfooter2.png);
 height: auto;

}

Answer 1

在 IE8 中测试，IE8 的兼容模式，Firefox:

• 来自 .fs-footer , 删除 float: left并添加 overflow: auto .

---

我认为这与您的问题无关，但您有这样的代码:

<a href="index.shtml" id="headLink" title="Banner Link">
  <div id="header">
    ...
  </div>
</a>

这不好 - 通常不应将 block 元素(例如 <div> 标签)放在行内元素(例如 <a> 标签)中。

---

此外，您还有:

<div id="generalInfoMainContent">

<h1>Classroom Policies - Academic Misconduct</h1>
<p>&nbsp;</p>

<li><a href="academicmisconduct.shtml#fraud">Academic misconduct</a></li>

  <li><a href="academicmisconduct.shtml#consequences">Consequences of Academic misconduct</a></li>
  <li><a href="academicmisconduct.shtml#forgery">Academic Misconduct: Forgery</a></li>
  </ul>
<hr />

您似乎缺少一个开口 <ul>标签。

如对您的问题的评论中所述，您应该确保您的 markup validates .