-1

我正在以下站点上工作：buzzspherefilms.site40.net 并且页脚在 IE 中未按预期显示。它适用于 Chrome 和 Mozilla，但在 IE 中，页脚出现在页面底部。谁能明白为什么？此外，任何将其实现为粘性页脚的帮助都会很棒。

谢谢

4

2 回答 2

1

简短的回答是您需要调整margin-topon #container。

在您的布局中，您有两个固定元素header和navbar，它们的组合高度分别为 120 像素和 40 像素。

如果您设置margin-top: 160pxon container，则布局将在浏览器中一致地工作。

IE 计算自动上边距的方式与其他浏览器不同，这可能会导致问题。

至于粘页脚，网上有关于如何做的文章，所以这是你的第一步。

jQuery 修复

您正在尝试container使用 jQuery 动态设置高度。出现跨浏览器问题可能是因为.outerHeightIE 中的数学运算方式不同。

先把它注释掉（你可以稍后再放回去）并尝试一个简单的 CSS 修复。

<script>
    $(document).ready(function() {
       $("#quickSearch").autocomplete({
       source: "quickSearch.php",
       minLength: 2
       });
          $('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );

    });
</script>
于 2013-04-01T19:10:12.497 回答
0

您提到使用sticky-footer，但看起来您并没有使用它。这是允许您执行此操作的 css。（我只是从网站上复制和粘贴）

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

来源：http ://ryanfait.com/sticky-footer/

于 2013-04-01T19:08:01.883 回答