html - 重复的背景图像在顶部和底部边缘未对齐

Question

去unboundsonics.com看看。

在页眉的顶部和页脚的底部，您可以看到对角细条纹没有对齐。一切都包含在一个<div>（<div id="wrap">准确地说）标签中，其边距是自动水平和垂直 15px。

如果我将垂直边距更改为自动，则不会出现此问题。我忽略了任何提示或观察结果？

任何帮助表示赞赏！

PS：我知道我的剧本和风格一团糟，但这是一项正在进行的工作。我只需要为明天到期的项目准备一个粗略的版本。

Answer 1

你的问题是你为 html 和 Body 都设置了 BG 图片，而且 body 有点小，这就是他们不排队的原因。

作为快速修复，您可以将 bg 设置为仅适用于 HTML，

但更好的做法是将 html 和 body 的边距设置为 0px，html 的填充为 0px，并为 body 设置填充，并将 bg 应用于 body。

编辑

快速解决：

body,html {
margin:0;
padding:0;
color:#B8C2C9;
background-image:url('bgstripes.png');
background-repeat:repeat;
}

改成：

body,html {
margin:0;
padding:0;
color:#B8C2C9;
}
html {
    background-image:url('bgstripes.png');
}

另请注意，没有必要使用背景：重复，因为这是默认行为

编辑2

那么我个人会做这样的事情：

body,html {
    margin:0;
    padding:0;
}
body{
    background:url(bgstripes.png) #B8C2C9;
    padding:15px 0 15px 0;
}
#wrap {
    width:900px;
    margin:0 auto;
    background:#0D1325;
    border:1px outset white;
}

通常我们会在 body 上放置一个 bg，但我们最好对父级进行填充，而不是容器上的边距。因为边距不需要拉动容器的高度，尤其是在父级没有填充或边框的情况下。您可以在 IE7 中注意到这一点，它可能会折叠底部边距。