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

转到unboundsonics.com以查看它。在顶部和底部边距重复背景图像不对齐

在页眉的顶部和页脚的底部，可以看到对角线细条纹不对齐。一切都包含在<div>（确切地说是<div id="wrap">）标记中，其标记边缘是水平自动的，垂直方向是15px。

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

任何帮助表示赞赏！

PS：我知道我的脚本&样式很混乱，但它是一项正在进行的工作。我只需要为明天的项目提供粗略的版本。

来源

2012-06-15 user1457717

你问题在于你为BOTH HTML和Body设置了BG图片，并且身体略小，这就是为什么他们不排队。

由于速战速决则可以设置BG只适用于HTML，

但是更好的将是为HTML和身体边距设置为0像素，填充为HTML 0像素，并设置填充的身体，将bg应用于身体。

编辑

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

还要注意，它不需要使用背景：重复，因为这是默认行为

E DIT2

好吧，我会亲自做这样的事情：

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中，它可能会崩溃底部边距。

来源

2012-06-15 03:46:30 Anonymous

如果它回答了这个问题，请考虑选择它作为答案。 – Anonymous

嗯，我试图做你所建议的是一个更好的解决方案，但它结束了相同的结果。然而，快速修复的岩石！谢谢！你能否告诉我更好的版本是什么样子？我想学习这个细微差别，所以我可以在将来防止它。 PS：我绝对是堆栈溢出的新手，所以......我会尽快找出你的帖子作为答案。 – user1457717

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

回答

相关问题