Firefox背景图片水平居中奇怪

Firefox background image horizontal centering oddity

提问人:Pekka 提问时间:11/9/2009 最后编辑:Pekka 更新时间:11/29/2011 访问量:3168

问:

我正在为 CMS 构建一些基本的 HTML 代码。 CMS中与页面相关的选项之一是“背景图像”和“将页面宽度/高度拉伸到背景图像宽度/高度”,以便使用大型背景图像,整个内容变得可见。

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

如果我执行以下操作:

  • 指定 1400px 宽的背景图像
  • 将“位置”指定为“中心中心”(水平/垂直)
  • 指定“将页面宽度拉伸为背景图像宽度”

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

  • 页面已正确拉伸到 1400 像素。我得到一个水平滚动条,因为我的屏幕比这小。目前为止,一切都好。
  • 现在奇怪的是:背景图像相对于 1400px 不是居中,因此显示了完整的图像,而是相对于我的 1280px 视口,将图像的一部分隐藏在屏幕的左边缘之外,并在右侧留下一条白色条纹而不是显示整个图像。
  • 没有额外的元素(DIV、包装器等)可以操纵任何东西。所有设置都直接在正文中。

更新:IE可以正确执行。谷歌浏览器也有同样的问题。

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

这是正常的Firefox行为吗? 知道我能做什么吗?

发布链接会有点麻烦,因为它都是在一个封闭的开发环境中,但如果所有其他方法都失败了,我会把一些东西放在一起看。

The 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 背景图像

评论


答:

0赞 Funky Dude 11/9/2009 #1

background-position 应保持在顶部; 你设置了吗

body{
margin:0;
padding:0;
}

评论

0赞 Pekka 11/9/2009
它应该显示为“min-width: 1400px”,我更改了它,但问题仍然存在。背景位置必须能够居中,因为屏幕可以宽于 1400 像素,并且图像需要定位。
1赞 krcko 11/9/2009 #2

尝试添加:

width: 100%;
display: table;

到标记样式(也可能是必需的)bodybackground-attachment: fixed;

评论

0赞 bobince 11/9/2009
display: table?哼?除非你让 body 的所有子元素和它们的子元素都变得如此,否则结果将完全不确定。display: table-rowdisplay: table-cell
0赞 Pekka 11/9/2009
显示:表格听起来确实有风险。我会选择上面的答案。无论如何,谢谢。
0赞 krcko 11/10/2009
实际上,我在使用firefox和大型背景图像(居中)时遇到了问题 - 如果您将窗口大小调整得更小,则内容背景将向左移动。在我的情况下添加已解决的问题......display: table; width: 100%;body
3赞 bobince 11/9/2009 #3

你被CSS规范的一个怪癖所困扰:多亏了第14.2节,你应用于元素的任何背景图像都会成为背景。(这是为了让作者可以继续使用body标签的背景,他们希望它来自CSS之前的浏览器。bodyhtml

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

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

但是固定宽度的文档?听起来是一个非常糟糕的主意。1400px

评论

0赞 Pekka 11/9/2009
感谢您提供出色的信息。正如我后来纠正的那样,1400px 应该是最小宽度。将尝试html路由。