页脚后的空白区域，仅限于Firefox和ie

Question

在网站底部的页脚之后似乎有随机的空格，但它只出现在IE和Firefox中。该网站在Safari和Chrome中运行良好。当我尝试使用inspect元素时，白色空间似乎不属于任何标记。它似乎与任何页脚标签无关，因为删除它们并没有改变任何东西。网站链接为：http://www.insightdatascience.com。

我看了很多答案，但似乎没有一个特别适用于我的网站。谢谢！

Answer 1

在stylesheetmain.css中，您有以下规则：

.fellows #insightpictures .buttons {
    margin: 635px auto;
}

将margin: 635px auto;更改为margin: 635px auto 0;以删除底部边距。

Answer 2

我有类似的问题。对此类问题的更一般修复是添加：

body {
    overflow: hidden;
}

到您的css文件。

Answer 3

我也遇到了类似的问题，仅在 FireFox 上。

我有一个典型的页面布局，带有顶部窗格和底部窗格等。我使用 Grid 设置了其布局。通过将底部窗格的背景设置为粉红色，我能够看到它覆盖了在页面底部边缘结束的预期区域。但是出现的垂直滚动条允许我在底部窗格下方滚动，从而显示其下方有空白。

我的问题是（由事实引起的）在底部窗格中我只有一个没有样式的 H3。默认情况下，FireFox 为 H3 元素提供顶部和底部边距，这会导致内容流过底部窗格的底部边缘。

当我将 H3 元素的边距设置为 0px 时，问题就消失了。

所以我想一般要意识到的是，即使你的容器元素（比如我的底部窗格）在页面的末尾整齐地结束，如果它有太多的内容，它可能会溢出并在它下面创造额外的空间.一般的解决方案是在这样的元素上设置 overflow:hidden 。内容不会自动停留在其容器的边界内。您必须明确防止溢出，如果有一些并且您不想要它。

为什么我在 FireFox 上看到这个问题，而在 Chrome 上没有？原来 H3 的默认样式在 Chrome 上是不同的，它给了它更少的底边距，所以没有足够的它导致溢出。