Question

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

由于

Answer 1

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

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

如果您在margin-top: 160px上设置container，则布局将在浏览器中保持一致。

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

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

jQuery Fix

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

首先评论这个（你可以在以后再把它放回去）并尝试一个简单的CSS修复。

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

    });
</script>

Answer 2

你提到使用粘性页脚，但它看起来并不像你正在使用它。这是允许你这样做的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 */
}

src：http://ryanfait.com/sticky-footer/

IE没有正确显示页脚和容器

2 个答案: