logo标签列表

页脚在IE兼容模式下无法固定（无法找到任何答案）

htmlcss
3
这是网站地址：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;

}
反引号仅适用于单行代码。对于多行代码，请使用四个空格进行缩进（Ctrl+K）。 - Thomas
刚来这个网站，谢谢提醒！ - 9ete
你的标记无法验证。可能是因为有一些未关闭的标签在某个地方造成了混乱。 - Thomas
这是什么版本？..是IE8吗？在IE中不支持min-height: 100%，我想。 - zack
我正在使用IE8，但是当我切换到兼容模式时，我的页脚就会出现问题。兼容模式将页面视为IE7（我已经阅读过，但如果我错了请纠正我）。 - 9ete
@hawkeye126：我的回答对你有用吗？ - thirtydot
2个回答
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>标签。

正如在您的问题评论中所指出的那样，您应确保您的标记验证。

0

我经常使用以下模板，并且在所有浏览器上都能很好地工作

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接