如何将 100% 宽度的背景 div 与水平居中的页面或 div 完美对齐答案

【问题标题】：How to align 100% width background div perfectly to the a horizontally centered page or div如何将 100% 宽度的背景 div 与水平居中的页面或 div 完美对齐
【发布时间】：2014-04-11 23:40:40
【问题描述】：

CSS

body {
    margin: 0;
    padding 0;
    min-width: 1072px;
    height: 100%;
    background: url('bg_repeat.png') center top repeat;
}
.bg {
    min-height: 100%;
    background: url('bg_center.png') center top repeat-y;
}
.page {
    width: 1024px;
    margin: 0 auto;
    position: relative;
}

HTML

<body>
    <div class="bg">
        <div class="page"></div>
    </div>
</body>

它本质上是一个居中的固定宽度页面，带有图案背景和一个额外的 bg div，用于添加垂直渐变照明效果。

问题：当我在水平居中的 div 旁边有一个 100% 宽度的 div 时，我会在水平调整浏览器窗口大小时得到那些 1px 的来回移动。

.page 不与 bg 和 body 的背景或它们的居中文本对齐。换句话说，.page 相对于背景图像的位置不会保持在完全相同的水平位置。

这是一个小问题。我没有任何像素完美的图案或任何东西。如果可能的话，我只是对此感到好奇。我已经看到 IE 11 模糊或使用具有特定窗口宽度的像素完美重复背景进行一些半像素移位。

小提琴：http://jsfiddle.net/HJsNY/ ~~但是问题不会在小提琴中重现。但是确切的代码会在整个窗口中导致 1px 偏移。（使用 Chrome）~~

编辑：实际上这个 jsfiddle 确实在 Chrome 中重现。但只有当 iframe 宽度因某种原因变得足够大（>~1300px）时。在 FF 上，小窗口宽度也很明显。

以下是发生的情况：1px 背景偏移，在调整浏览器窗口大小时不断交替。

【问题讨论】：

你能发个小提琴吗
我添加了示例截图。
我可以在我测试过的所有 3 个浏览器（Chrome、FF、IE 11）中看到这种情况。我在所有浏览器 + ABP ext 上都有大部分默认设置。奇怪的是，我似乎是唯一能注意到这一点的人。虽然我可以理解为什么如果不小心处理会发生这种情况。偶数和奇数宽度，使用不同方法居中不同元素等等......可能存在使用非居中背景图像或类似东西的解决方法。
@Rob Sedgwick - 我在迄今为止发布的所有小提琴上都看到了这个问题，包括你的。希望现在很清楚。最初，在 jsfiddle 上尝试此操作时，我对 Chrome 有点困惑，并且不再看到此问题发生。事实证明，Chrome 在不同的背景图像和窗口宽度下的行为略有不同。使用当前示例，该问题在 ~1300px 窗口宽度附近变得最明显。就是这样。
这不是 1300 像素，而是 1275 像素（您的背景宽度），因为一旦背景图像开始小于视口宽度，就会发生这种情况 - 并且有一些东西要居中。 jsfiddle iframe 根本不够宽。为了使这个像素移动，必须在另一个水平居中的元素中有一个水平居中的元素。你找到解决方案了吗？我相信我在这里也有同样的问题：stackoverflow.com/questions/25505916/…

标签： html css

【解决方案1】：

我认为您需要重置 CSS。 Firefox（就像每个浏览器一样）显示带有一些实习 css 的 css。您必须删除它。

将此添加到您的 html 中：

* {
    margin: 0;
    padding: 0;
}

我更新了你的JsFiddle。

如果您想了解更多信息，我已经写了here。

它解决了你的问题吗？

【讨论】：

没有。重置并没有改变问题。