【问题标题】: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-blockdisplay: table-cell,或者甚至仍然使用相对定位,只要你考虑到上述情况(例如使用负边距)。

    【讨论】:

      【解决方案2】:

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

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

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

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

      【讨论】:

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

      尝试在 CSS 中从 bodyhtml 中删除 100% 的高度。

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

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

      【讨论】:

        【解决方案4】:

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2020-06-27
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多