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>

这不好 - 通常不应将块元素（例如<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。

Answer 2

我总是使用以下模板，它始终适用于所有浏览器

CSS

body, html{
height: 100%;
}

body, p {
margin: 0; padding: 0;
}   

#wrapper {
min-height: 100%;
}

* html #wrapper {
height: 100%;
}



/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}

#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THE FIRST no. SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}

#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}

/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}

#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

HTML

<body>

<div id="wrapper">


    <div id="header">
        <div id="header_900">
            <p>header</p>
        </div><!--header_900-->
    </div><!--header-->


    <div id="content">
        <div id="content_900">
            <p>content</p>
        </div><!--content-->
    </div><!--content-->


</div><!--wrapper-->


<div id="footer">
    <div id="footer_900">
        <p>footer</p>   
    </div><!--footer_900-->
</div><!--footer-->


</body>

页脚将不会坚持IE兼容模式（无法在任何地方找到答案）

2 个答案: