Question

的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和正文或其居中文字的背景对齐。换句话说.page不会保持相对于背景图像位置的相同精确水平位置。

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

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

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

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

enter image description here

Answer 1

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

将此添加到您的html：

* {
    margin: 0;
    padding: 0;
}

我更新了您的JsFiddle。

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

它解决了你的情况吗？

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

1 个答案: