Question

我一直在这个网站上工作，http://hidden.xx问题是<body>从顶部推下约20px。这会导致页面底部出现问题，您可以看到背景渐变在最后20px重复出现。如果你试图取出萤火虫或任何其他小组，重复发生的区域会变大。

我试过解决这个问题，但是firebug没有给出任何导致这种行为的线索。我尝试将身体绝对定位到顶部，然后解决它，但是如果你从浏览器的底部开出一个面板，就像萤火虫等一样，重复区域会再次出现。

编辑：有两个问题，第一个问题是保证金崩溃问题，并且由于@zzzzBov而得到了解决。由于@Alex

，第二个问题通过向身体添加background-repeat:repeat-x;来解决

Answer 1

试试这样：

body{ background: -moz-linear-gradient(#377AA8, #589CCB) repeat-x scroll 0 0 #579BCA; }

仅将背景重复到“X”（水平），并将背景颜色添加到渐变的最浅颜色。

Answer 2

Margin collapsing strikes again！

_{#wrapper上的边距正在与body折叠。您可以将其更改为padding: 20px 0和margin: 0 auto;}

Answer 3

如果没有看到您的样式表，我建议您尝试清除padding标记上的margin和body（将它们设置为0）。如果失败了，那么我建议你在导航栏上清除它们。

Answer 4

将第3行的背景颜色更改为#589CCB：

html {   background-color: #589CCB;}

/* line 20, ../sass/screen.scss */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #589CCB; /*OLD: background: #377aa8;*/
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #377aa8), color-stop(100%, #589ccb));
    background-image: -webkit-linear-gradient(#377aa8, #589ccb);
    background-image: -moz-linear-gradient(#377aa8, #589ccb);
    background-image: -o-linear-gradient(#377aa8, #589ccb);
    background-image: -ms-linear-gradient(#377aa8, #589ccb);
    background-image: linear-gradient(#377aa8, #589ccb);
    }

身体被推倒了

4 个答案: