Question

我正在为我的朋友制作一个母版页，我只是在Firefox上发现了一个小错误，在页脚之后的白色空间我看了关于这个问题的所有其他问题而且没有一个帮助，我有有问题的笔：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>White space</title>
    </head>
    <body>
        Some Content I m thinking to put here.
    </body>
</html>

我可以使用Firefox前缀

吗？

http://codepen.io/J_Mack/pen/OVdOgX

Answer 1

我总是用：

启动我的CSS文件

*, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

这样我确保浏览器不添加任何填充或边距，因此我可以完全控制它。在您的情况下，添加* {margin: 0}可以解决问题，但您必须补偿丢失默认边距的其他元素的边距。

Answer 2

在您的具体情况下，只需添加overflow: hidden即可防止页面底部出现空白边距：

#footer {
    overflow: hidden;
    float: none;
    height: 196px;
    margin-left: auto;
    margin-top: 0px;
    clear: none;
    width: 960px;
    min-height: 50px;
    margin-right: auto;
}

Answer 3

在搞乱了你的codepen一段时间之后，我发现如果你向#footer添加overflow: hidden;它会解决问题，但是最好将它用作临时修复并找出实际问题稍后，如果你不想这样做有识别浏览器和添加样式的方法，我认为这是一种方式，但是使用溢出确实解决了问题，或者至少对我而言只是不赞成，因为它实际上没有告诉你问题是什么。

或者看看上面的答案......

仅在firefox

3 个答案: