重复背景图像在顶部和底部边缘处不对齐

Question

转到unboundsonics.com查看。

在页脚的页眉和底部的顶部，您可以看到对角线细条纹不对齐。所有内容都包含在<div>（<div id="wrap">准确）标记中，其边距水平自动，垂直15px。

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

任何帮助表示赞赏！

PS：我知道我的剧本＆amp;风格很乱，但这是一项正在进行中的工作。我只需要为明天的项目准备一个粗略的版本。

Answer 1

你的问题是你为两张html和Body设置了BG图片，而且身体颜色要小一些，这就是为什么他们不排队。

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

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

修改

的QuickFix：

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');
}

另请注意，没有必要使用background：repeat，因为这是默认行为

<强> EDIT2

我个人会做这样的事情：

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;
}

通常我们会给身体添加一个bg，但是在容器上没有边距，我们最好填充到父级。因为边距不必拉高容器的高度，特别是如果父节点没有填充或边框。这可以在IE7中注意到，它可能会使底部边缘崩溃。