Firefox 背景图像水平居中异常答案

【问题标题】：Firefox background image horizontal centering oddityFirefox 背景图像水平居中异常
【发布时间】：2010-12-14 15:40:42
【问题描述】：

我正在为 CMS 构建一些基本的 HTML 代码。 CMS 中与页面相关的选项之一是“背景图像”和“将页面宽度/高度拉伸到背景图像宽度/高度”。这样对于大的背景图像，整个事物就会变得可见。

我当前的屏幕分辨率是 1280 x 1024。

如果我执行以下操作：

指定一个 1400 像素宽的背景图片
将“位置”指定为“中心中心”（水平/垂直）
指定“将页面宽度拉伸到背景图像宽度”

然后在 FF 中，会发生以下情况：

页面已正确拉伸至 1400 像素。我得到一个水平滚动条，因为我的屏幕比那个小。到目前为止一切顺利。
现在奇怪的是：背景图像不是相对于 1400px 居中，因此显示完整图像，但 相对于我的 1280px 视口，隐藏了图像的一部分超出屏幕的左边缘，并在右侧留下一条白色条纹，而不是显示整个图像。
没有其他元素（DIV、包装器...）可以操纵任何东西。所有设置都直接在正文中。

更新：IE 正确地做到了。谷歌浏览器也有同样的问题。

就好像 Firefox 首先以 100% 的宽度渲染背景图片，将其居中，然后注意到正文需要拉伸到 1400 像素。

这是正常的 Firefox 行为吗？有什么想法我能做什么？

发布链接会有点麻烦，因为它都是在一个封闭的开发环境中，但如果一切都失败了，我会整理一些东西来看看。

CSS：

body 
 {
 background-image: url(http://www.domain.com....image.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 min-width: 1400px;
 height: 100%;
 }

【问题讨论】：

标签： html css firefox background-image

【解决方案1】：

背景位置应该在左上角；你设置了吗

body{
margin:0;
padding:0;
}

【讨论】：

它应该是“min-width: 1400px”，我改了，但问题仍然存在。背景位置必须能够居中，因为屏幕可以宽于 1400px 并且需要定位图像。

【解决方案2】：

尝试添加：

width: 100%;
display: table;

到body 标记样式（也可能需要background-attachment: fixed;）

【讨论】：

display: table?嗯？除非您将 body display: table-row 的所有子元素及其子元素 display: table-cell 设为，否则将产生完全未定义的结果。
display：桌子听起来确实有风险。我会选择上面的答案。还是谢谢。
实际上，我遇到了 Firefox 和大背景图像（居中）的问题 - 如果您将窗口大小调整为更小，那么内容背景会向左移动。在body 上添加display: table; width: 100%; 解决了我的问题...

【解决方案3】：

您被 CSS 规范的一个怪癖所困扰：感谢section 14.2，您应用到body 元素的任何背景图像都会变成html 的背景。（这是为了让作者可以继续在 body 标签上使用背景，他们希望它来自 CSS 之前的浏览器。）

在 IE 中，html 代表整个文档画布并展开以适应放大的正文宽度。在其他浏览器中，它的行为与任何其他 display: block 元素一样，并且无论您在其中放入什么，都保持视口宽度。其他浏览器在这里可以说更正确，但 CSS 规范在这个主题上并不是很清楚，结果是 IE 中的结果更接近于 14.2 关于画布的措辞。无论哪种方式，它都不是真正指定的可靠行为。

通过在html 而不是body 上设置宽度和背景，您可以获得跨浏览器的一致结果。（记得在 IE 中使用标准模式。）

但是1400px 固定宽度的文档？听起来是个很糟糕的主意。

【讨论】：

感谢您提供出色的信息。正如我稍后更正的那样，1400px 应该是最小宽度。将尝试 html 路由。