这是网站:
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;
}
最佳答案
在 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> </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 .
关于html - 页脚不会停留在 IE 兼容模式(无法在任何地方找到答案),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4727964/