提问人:Pekka 提问时间:11/9/2009 最后编辑:Pekka 更新时间:11/29/2011 访问量:3168
Firefox背景图片水平居中奇怪
Firefox background image horizontal centering oddity
问:
我正在为 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%;
}
答:
background-position 应保持在顶部; 你设置了吗
body{
margin:0;
padding:0;
}
评论
尝试添加:
width: 100%;
display: table;
到标记样式(也可能是必需的)body
background-attachment: fixed;
评论
display: table
?哼?除非你让 body 的所有子元素和它们的子元素都变得如此,否则结果将完全不确定。display: table-row
display: table-cell
display: table; width: 100%;
body
你被CSS规范的一个怪癖所困扰:多亏了第14.2节,你应用于元素的任何背景图像都会成为背景。(这是为了让作者可以继续使用body标签的背景,他们希望它来自CSS之前的浏览器。body
html
在 IE 中,表示整个文档画布,并展开以适合放大的正文宽度。在其他浏览器中,它的作用与任何其他元素一样,无论您在其中放置什么,它都会保持视口宽度。其他浏览器在这里可以说更正确,但 CSS 规范在这个主题上并不是很清楚,结果是 IE 中的结果更接近于 14.2 关于画布的措辞。无论哪种方式,它都没有真正指定可靠的行为。html
display: block
您可以通过将宽度和背景设置为 on 而不是 来跨浏览器获得一致的结果。(请记住在 IE 中使用标准模式。html
body
但是固定宽度的文档?听起来是一个非常糟糕的主意。1400px
评论