微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – 中心页脚固定在IE的底部

我正在编写一个大学项目的Web界面,我一直在处理这个问题:

我希望我的页脚固定在底部,所以无论我使用哪个屏幕或者我切换全屏模式它都在位

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

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"  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" title="IMAGES"></a>
    <a href="images/destiny_carma_jewell.jpg" rel="shadowBox" title="IMAGES"></a>
    <a href="images/destiny-joan-marie.jpg" rel="shadowBox" title="IMAGES"></a>
    <a href="images/pursuing_destiny.jpg" rel="shadowBox" 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;
}

白色边框仅用于调试目的

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

任何建议表示赞赏

解决方法

保证金:自动;在IE7中被破坏了.
你可以绕过它

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

,从那以后,div伸展到全宽,ul将自动对齐到中间.
但也许这不是你想要的.

如果这不是一个可接受的解决方案,网络上的人说你可以通过将父母的文本与中心对齐来修复它 – 但这可能会使布局的其余部分变得棘手……你将不得不玩它,但至少你知道什么是坏的.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐