Дополнительные пробелы под липким нижним колонтитулом в FF и IE

По какой-то причине у меня появляется дополнительный пробел (около 1 пикселя) под липким нижним колонтитулом в Firefox и Internet Explorer. Хотя в Хроме выглядит нормально.

Я использую следующую структуру 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 не показывает никаких элементов в этом пробеле.