Question

我试图让我的CSS布局在firefox中以与在Chrome中显示的方式相同（显然是IE）。我使用django，但这不会导致任何问题。首先，这是我的HTML：

<html>
<body>
<div id=page>
    <div id=headerBar>
        <p id=headerText>WELCOME TO JAGOLY.NET</p>
    </div>
    <div id=container>
        <div id=content>
            <div id=contentTop><p>Lots of Text<p></div>
        </div>
        <img id=logoImg src="/static/img/logo_150.png" alt="Jagoly Logo">
        <div id=sideBox>
            <ul id=sideList>
                <li class="child sibling"><a href="/">Home</a></li>
                <li class="child sibling"><a href="/about">About</a></li>
                <li class="child sibling"><a href="/page-long-title">A Page with a Long Title</a></li>
            </ul>
        </div>
    </div>
</div>
<div id=footerBar>
    <p id=footerText>jagoly.net © 2014 James Gangur</p>
</div>
</body>

</html>

这是我的CSS：

body {
    margin: 0;
    background: url("/static/img/bg_page.png");
    height: 100%;
}

#page {
    min-height: calc(100% - 40px);
}

#headerBar {
    position: relative;
    background: url("/static/img/bg_headerBar.png");
    height: 60px;
    width: 100%;
    min-width: 960px;
    box-shadow: 0 0 12px 2px #000;
    margin: 0 auto;
    margin-bottom: 20px;    /* IMPORTANT LINE */
}

#headerText {
    margin: 0;
    color: #C12;
    font-family: "Droid Serif", "serif";
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 10px #FDF;
}

#headerIcons {
    right: 0;
}

#container {
    width: 940px;
    padding: 0;
    margin: 0 auto;
}

#content {
    background: #5DD;
    padding: 0 10px;
    width: 740px;
    float: left;
    border-radius: 4px;
    box-shadow: 0 0 12px 3px #000;
}

#logoImg {
    float: right;
    margin-right: 5px;
}

#sideBox {
    background: #5DD;
    width: 140px;
    float: right;
    padding: 0 10px;
    margin-top: 10px;
    border-radius: 4px;
    box-shadow: 0 0 12px 3px #000;
    clear: right;
}

#sideList {
    list-style-type: none;
    padding: 0;
    margin: 4px 0;
}

#sideList .child {
    margin: 8px 0;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 2px 5px #000;
    display: inline-block;
    width: 100%;
}

#sidelist .selected {background: linear-gradient(to bottom, #A7C 0%, #426 100%);}
#sidelist .sibling {background: linear-gradient(to bottom, #EBF 0%, #738 100%);}
#sidelist .child:hover {background: linear-gradient(to bottom, #FCF 0%, #96A 100%);}

#sidelist .child a {
    text-decoration: none;
    text-align: center;
    font-family: "Droid Sans", "sans-serif";
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    padding: 8px 8px;
    width: calc(100% - 16px);
}

#sidelist .child a:link{color: #C12;}
#sidelist .child a:visited{color: #C12;}

#footerBar {
    background: #201028;
    height: 40px;
    width: 100%;
    margin-top: -40px;
    top: 20px;
    box-shadow: 0 0 12px 2px #000;
    position: relative;
    min-width: 960px;
    clear: both;
}

#footerText {
    margin: 0;
    text-align: right;
    color: #FFF;
    padding: 0;
    padding-top: 10px;
    padding-right: 10px;
    font-family: "Droid Sans", "sans-serif";
}

现在，在chrome中，这些页面按预期工作。但是，在Firefox中，缩小时的页脚距离页面底部20px。这是因为在它上面应用边距（在上面的css中标记）并没有推下页脚。

我该如何解决这个问题？我宁愿不为此实现和firefox特定代码，因为其他一切都很好而且标准。

我对任何类型的网页设计都很陌生，所以我真的不知道如何解决这类问题。

提前致谢！

CSS边距无法在Firefox中运行

0 个答案: