Firefox背景图像水平居中奇怪

Question

我正在为CMS构建一些基本的HTML代码.CMS中与页面相关的选项之一是"背景图像"和"拉伸页面宽度/高度到背景图像宽度/高度".因此,对于大背景图像,整个事物变得可见.

我目前的屏幕分辨率是1280 x 1024.

如果我执行以下操作:

• 指定宽度为1400像素的背景图像
• 将"position"指定为"center center"(horiz./ vert.)
• 指定"拉伸页面宽度到背景图像宽度"

然后在FF中,发生以下情况:

• 页面正确拉伸到1400px.我得到一个水平滚动条,因为我的屏幕小于那个.到现在为止还挺好.
• 现在奇怪的是:背景图像不是相对于1400px居中,因此显示完整的图像,但相对于我的1280px的视口,隐藏了一部分图像超出屏幕的左边缘,并留下了白色条纹向右而不是显示整个图像.
• 没有其他元素(DIV,包装器......)可以操纵任何东西.所有设置都直接在正文中.

更新:IE正确完成.谷歌Chrome有同样的问题.

就好像Firefox首先渲染100%宽度的背景图像,居中,然后注意到身体需要拉伸到1400px.

这是正常的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%;
 }

Answer 1

您被 CSS 规范的一个怪癖所困扰：由于第 14.2 节，您应用于body元素的任何背景图像都将成为背景html。（这样做的目的是让作者可以继续在 body 标签上使用他们期望来自 CSS 之前的浏览器的背景。）

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

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

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