仅在 IE7 和 Chrome 中页面底部的空白答案

【问题标题】：Whitespace at bottom of page in IE7 and Chrome only仅在 IE7 和 Chrome 中页面底部的空白
【发布时间】：2009-07-18 22:22:33
【问题描述】：

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

【问题讨论】：

标签： html css internet-explorer-7 google-chrome

【解决方案1】：

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

Relative positioning 相对于它们的原始位置移动元素，但它们的原始位置仍被“占用”，随后的元素表现得好像什么都没有改变。

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

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

【讨论】：

【解决方案2】：

你可以在你的 CSS 中试试这个：

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

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

顺便说一句，我在 Firefox 上也有空格。

【讨论】：

我在 Firefox 上也有空格。
我将其添加到本地副本上的 CSS 文件的末尾，但无济于事。不过谢谢。感谢您让我了解 FF。
由于 * 是最不具体的选择器，您可能还必须将 !important 添加到您的规则中。

【解决方案3】：

尝试在 CSS 中从 body 和 html 中删除 100% 的高度。

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

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

【讨论】：

【解决方案4】：

不是很好的做法，但是溢出隐藏会隐藏它。

【讨论】：