中心页脚固定在底部IE [英] Center footer fixed at the bottom IE

问题描述

我正在为一个大学项目编写一个Web界面，并且我一直在处理这个问题：

我希望我的页脚固定在底部，因此它已到位无论我使用哪个屏幕，或者如果我切换全屏模式

它适用于除IE7以外的所有其他浏览器（我不必支持以前的版本）

HTML

 < div id =menu > 
< a href =information.html =shadowbox; height = 500; width = 650title =INFORMATION> 
< img src =images / info.pngalt =信息图标/> 
< / a> 
< a href =images / bricks_of_destiny.jpg =shadowbox [gallery]title =IMAGES> 
< img src =images / image.pngalt =图片图标/> 
< / a> 
< a href =music_player.swftitle =MUSIC =shadowbox; height = 400; width = 600> 
< img src =images / music.pngalt =音乐图标/> 
< / a> 
< a href =＃title =MOVIES>< img src =images / television.pngalt =电影图标/>< / a> 
< a href =quotes.htmltitle =QUOTES =shadowbox; height = 300; width = 650> 
< img src =images / male_user.pngalt =男性用户图标/> 
< / a> 
< a href =＃title =REFERENCES> 
< img src =images / search_globe.pngalt =搜索全球图标/> 
< / a> 
< / div> 
 < a href =images / destiny_carma_jewell.jpg =shadowbox [gallery]title =IMAGES>< / a> 
< a href =images / destiny-joan-marie.jpg =shadowbox [gallery]title =IMAGES>< / a> 
  
< div class =clear>< / div> 
 
 
< div id =destiny> 
了解有关单词< span class =strong> DESTINY< / span>的更多信息！点击上面的图标之一！ 
（F11切换全屏/标准屏幕）
< / div> 
 
< div id =footer> 
< ul id =breadcrumbs> 
< li>免责声明< / li> 
< li> |图标由< a href =http://dryicons.com/ =shadowbox> dryicons.com< / a>< / li> 
< li> |网址：< a href =http://www.eezzyweb.com/ =shadowbox> eezzyweb< / a>< / li> 
< li> | < a href =http://jquery.com/ =shadowbox> jQuery< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  

CSS：

  #wrapper {
 text-align：center; 
 margin：0 auto; 
 width：750px; 
 height：430px; 
 border：1px solid #fff; 
} 
 #menu {
 position：relative; 
 margin：0 auto; 
 top：350px; 
 width：450px; 
 height：60px; 
} 
 #destiny {
 position：relative; 
 top：380px; 
颜色：#FFF; 
 font-size：1.5em; 
 font-weight：bold; 
 border：1px solid #fff; 
} 
 #breadcrumbs {
 list-style：none; 
} 
 #breadcrumbs li {
 display：inline; 
颜色：#FFF; 
} 
 #footer {
 position：absolute; 
 width：750px; 
 height：60px; 
 margin：0 auto; 
 text-align：center; 
 border：1px solid #fff; 
 bottom：0; 
} 
 .clear {
 clear：both; 
} 
  

白色边框仅用于调试目的

该应用程序托管于 http://www.eezzyweb.com/destiny/

任何建议都会被赞赏

解决方案

margin：auto; 在IE7中被破坏了。
您可以通过

  #footer {
 width：100％; 
 left：0px; 
} 
  

，因为这样div扩展到全宽度，如果这不是一个可以接受的解决方案，那么网络上的人就会说你可以修复这个问题。 它将父母的文本与中心对齐 - 但这可能会影响布局的其余部分...您必须随时使用它，但至少您知道发生了什么坏事。

I am coding a web interface for a University project and I have been dealing with this issue:

I want my footer fixed at the bottom so it is in place no matter which screen I am using or if I toggle the full screen mode

It works in all the other browsers except IE7 (I do not have to support previous versions)

HTML

    <div id="menu">
        <a href="information.html"  rel="shadowbox;height=500;width=650"      title="INFORMATION" >
            <img src="images/info.png" alt="information icon" />
        </a>
        <a href="images/bricks_of_destiny.jpg" rel="shadowbox[gallery]"  title="IMAGES" >
            <img src="images/image.png" alt="image icon"  />
        </a>
        <a href="music_player.swf" title="MUSIC" rel="shadowbox;height=400;width=600" >
            <img src="images/music.png" alt="music icon" />
        </a>
        <a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon"  /></a>
        <a href="quotes.html" title="QUOTES" rel="shadowbox;height=300;width=650" >
            <img src="images/male_user.png" alt="male user icon"  />
        </a>
        <a href="#" title="REFERENCES">
            <img src="images/search_globe.png" alt="search globe icon"  />
        </a>
    </div>
    <a href="images/destiny_1.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
    <a href="images/destiny_carma_jewell.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
    <a href="images/destiny-joan-marie.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
    <a href="images/pursuing_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>

    <div class="clear"></div>


    <div id="destiny">
        Discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above!
        (F11  Toggle Full / Standard screen)
     </div>

     <div id="footer">
        <ul id="breadcrumbs">
            <li>Disclaimer</li>
            <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
            <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
            <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
        </ul>
    </div>
</div>

CSS:

#wrapper{
text-align:center;
margin:0 auto;
width:750px;
height:430px;
border:1px solid #fff;
}
#menu{
position:relative;
margin:0 auto;
top:350px;
width:450px;
height:60px;
}
#destiny{
position:relative;
top:380px;
color:#FFF;
font-size:1.5em;
font-weight:bold;
border:1px solid #fff;
}
#breadcrumbs{
list-style:none;
}
#breadcrumbs li{
display:inline;
color:#FFF;
}
#footer{
position:absolute;
width:750px;
height:60px;
margin:0 auto;
text-align:center;
border:1px solid #fff;
bottom:0;
}
.clear{
    clear:both;
}

The white borders are there only for debugging purposes

The application is hosted at http://www.eezzyweb.com/destiny/

Any suggestion is appreciated

解决方案

margin: auto; is what's broken in IE7. You can go around it with

#footer {
  width: 100%;
  left: 0px;
}

, since that way the div stretches to full width and the ul will auto-align to the middle.
But maybe that's not what you want.

If it's not an acceptable solution, people on the web say you can fix it with aligning the parent's text to the center - but that might screw the remainder of the layout... you'll have to play around with it, but at least you know what's going bad.

这篇关于中心页脚固定在底部IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！