Question

我在this page的最底部看到了额外的空白，但仅限于IE7和Chrome（并且，正如预期的那样，在IE7模式和兼容模式下的IE8中）。 Here's在IE7中我的样子。我使用Firebug和IE开发人员工具栏检查了代码，但没有发现任何异常。任何人都知道导致这个浏览器特定空白的原因是什么？谢谢。

Answer 1

您获得空白的原因是因为您在页脚中使用徽标的相对定位。改为使用绝对定位。

Relative positioning相对于原始位置移动元素，但是它们的原始位置仍然“被采用”，后续元素就像没有任何变化一样。

因此空白是由这些徽标占据的原始位置引起的。如果您在页脚内的所有元素上注释position: relative，您将看到导致该空白的原因。

当然，绝对定位不是修复它的唯一方法，但它肯定是最简单的。您也可以浮动它们，使用display: inline-block，display: table-cell或者甚至仍然使用相对定位，只要您考虑上述因素（例如，使用负边距）。

Answer 2

您可以在CSS中尝试：

* { margin:0px; padding:0px; }

如果可行，则某个元素的填充或边距会导致问题。

顺便说一句，我也在Firefox上获得了空白。

Answer 3

尝试从CSS中的body和html中移除100％的高度。

我不完全确定这是否是原因，但我已经看到了盒子模型中的错误以及100％高度的元素造成了这种问题。

顺便说一句，它位于screen.css文件的第57行。

Answer 4

不好练习，但隐藏的溢出会隐藏它。