Question

我有一个带页脚的网站，在Chrome和Safari中显示效果很好。

然而，当在Mozilla Firefox中查看时，页脚不在页面底部，从页眉下方开始遍布页面。

是否与在Firefox中使用和标签有关？或者是其他东西。

<!doctype html>
<html>
    <head>
        Stuff.....
    </head>

    <body>
        <header>
            Stuff....
        </header>

        <div id="main_container">
            <div id="content_container">
                Text (h1, h2 and p tags)
        </div>

        <div id="networking_container">
            <div id="twitter">
                Twitter Feed...
            </div>

            <div class="fb-like" id="facebook" data-href="http://www.facebook.com/EtempaSolutions" data-send="true" data-layout="button_count" data-width="225" data-show-faces="false">
            </div>

            <g:plusone size="medium" annotation="inline" width="215"></g:plusone>
        </div>

        <footer>
            <table id="favourite_links_table" cellpadding="4">
                Stuff...
            </table>

            <div id="credits">
                <p id='main_credit'>This website has been designed and hosted by <a href='http://www.etempa.co.uk'>Etempa Solutions</a></p>

                <p id='sub_credit'>Web Design, Including Coding and Images © Copyright to Pippa Rose Smith 2012. All Rights Reserved</p>
            </div>
        </footer>
    </body>
</html>

css位是：

html 
{ 
    padding: 30px 10px; 

    line-height: 1.4; 

    background-color: #CCC;

    -webkit-text-size-adjust: 100%; 

    -ms-text-size-adjust: 100%; 
}

html, input 
{   
    font-family: Candara, Verdana, Geneva, sans-serif; 
}

body 
{ 
    width: 860px; 

    padding: 20px 30px 20px;

    border: 1px solid #b3b3b3; 

    border-radius: 4px; 

    margin: 0 auto; 

    box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; 

    background: #fcfcfc; 
}

footer
{
    margin-top: 30px;
}

#main_container
{
    clear: both;

    padding-top: 15px;
}

#favourite_links_table
{
    text-align: center;

    width: 850px;
} 

#credits
{
    margin-top: 30px;
}

#main_credit
{
    color: #9933FF;

    font-size: 13px;

    text-align: center;
}

#sub_credit
{
    color: #9933FF;

    font-size: 12px;

    text-align: center;
}

#content_container
{
    float: left;

    width: 70%;
}

#networking_container
{
    float: right;

    width: 25%;
}

#twitter
{
    padding-top: 30px;

    padding-bottom: 20px;
}

#facebook
{
    padding-bottom: 20px;
}

Answer 1

我找到了答案

我添加了明确的内容：两者都是我的页脚所以css现在是

footer
{
    margin-top: 30px;

    clear: both;
}

页脚不会仅停留在我的网站底部

1 个答案: