google-chrome - FF 和 IE 中粘滞页脚下方的额外空白

Question

出于某种原因，我在 Firefox 和 Internet Explorer 的粘性页脚下得到了一些额外的空白（大约 1 像素）。不过在 Chrome 中看起来不错。

我正在使用以下 HTML 结构：

<div id="wrap">

    <header><p>Header</p></header>

    <div id="main">
        <p>Content here...</p>
    </div>

    <footer><p>Footer</p></footer>

</div>

CSS：

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
    position: relative;
}

#main {
    padding: 20px 0 120px 0; /* padding-bottom must be same height as the footer */
    position: relative;
}

footer {
    position: absolute;
    bottom: 0px;
    height: 100px;
}

JSFiddle 演示（如果问题不立即可见，请尝试调整窗口大小）

我只是无法弄清楚是什么原因造成的。Firebug 不会在该空格中显示任何元素。

Answer 1

添加overflow:hidden到容器中

还

bottom:0px由于舍入（天花板/地板）问题，有时被解释为底部：1px

这在任何浏览器中都不会发生，但显然发生在 msie