Html 重复背景图像在上下页边距处不对齐

去看看吧

在页眉顶部和页脚底部，您可以看到对角细条纹没有对齐。所有内容都包含在一个

（

确切地说）标签中，该标签的边距水平自动，垂直自动为15px

如果我将垂直边距更改为“自动”，则不会出现此问题。有什么我忽略的提示或观察吗

感谢您的帮助

---

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

你的问题是，你为html和正文都设置了BG图片，而正文稍微小了一点，这就是为什么它们没有对齐

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

但更好的方法是将html和正文的边距设置为0px，将html的边距设置为0px，将正文的边距设置为padding，并将bg应用于正文

编辑

快速修复：

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中注意到，它可能会折叠底部边缘。

如果它回答了问题，请考虑把它作为答案。嗯，我试着做你建议的是更好的解决方案，但结果却一样。然而，快速修复岩石！非常感谢。你能告诉我更好的版本是什么样子吗？我想了解这一细微差别，以便将来能够避免它。附言：我肯定是新来的堆栈溢出，所以…我会选择你的帖子作为答案，只要我知道如何。