Firefox背景图像水平居中奇怪 [英] Firefox background image horizontal centering oddity

问题描述

我正在构建CMS的一些基本HTML代码。
CMS中与页面相关的选项之一是背景图片和拉伸页面宽度/高度到背景图片宽度/高度。

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

如果我执行以下操作：

• 指定宽度为1400像素的背景图片


• positionascenter center（horiz。/ vert。）


• 指定拉伸页宽对背景图片宽度

那么在FF中，会发生以下情况：

• 页面被正确拉伸到1400px。我得到一个水平滚动条，因为我的屏幕比那更小。到目前为止这么好。


• 现在奇怪的事情：背景图片不以1400像素为中心，因此显示完整图片，但相对于我的视口1280像素，隐藏图像的一部分超出屏幕的左边缘，并留下白色的条纹在右边，而不是显示整个图像。


• 没有额外的元素（DIV，包装器...）可以操纵任何东西。所有设置都直接在正文中。

更新：IE正确。 Google Chrome有相同的问题。

就像Firefox首先以100％的宽度渲染背景图片，使它居中，然后通知人体需要拉伸到1400像素。

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

发布链接会有点麻烦，因为它是在一个封闭的开发环境中，但如果所有的失败，我会

  body 
 {
 background-image：url（http：//www.domain.com....image.jpg）; 
 background-repeat：no-repeat; 
 background-position：center center; 
 min-width：1400px; 
 height：100％; 
} 
  

解决方案

CSS规范的一个奇怪：感谢第14.2节，任何背景您应用于 body 元素的图像将成为 html 的背景。 （这是为了使作者可以继续使用body标签上的背景，他们希望它来自pre-CSS浏览器。）

在IE中， html 表示整个文档画布并扩展以适合放大的主体宽度。在其他浏览器中，它像任何其他 display：block 元素，并保持视口宽度，无论你放在什么。其他浏览器在这里可以更正确，但CSS规范在主题上不是很清楚，结果是，IE的结果更接近地代表14.2关于画布的措辞。

您可以通过在 html 而不是 body 。 （请记住在IE中使用标准模式。）

但是 1400px 听起来是一个很糟糕的主意。

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large background images, the whole thing becomes visible.

My current screen resolution is 1280 x 1024.

If I do the following:

• Specify a background image that is 1400px wide
• Specify "position" as "center center" (horiz. / vert.)
• Specify "stretch page width to background image width"

then in FF, the following happens:

• the page is correctly stretched to 1400px. I get a horizontal scroll bar as my screen is smaller than that. So far so good.
• and now the bizarre thing: the background image is not centered relative to the 1400px, thus showing the full image, but relative to my viewport of 1280px, hiding a part of the image beyond the left edge of the screen, and leaving a white stripe to the right instead of showing the whole image.
• There are no additional elements (DIVs, wrappers...) that could manipulate anything. All settings are directly in the body.

Update: IE does it correctly. Google Chrome has the same problem.

It is as if Firefox first renders the background image at 100% width, centers it, and then notices that the body needs to be stretched to 1400px.

Is this normal Firefox behaviour? Any ideas what I can do?

Posting a link would be a bit cumbersome as it's all in a closed development environment but if all else fails, I will put something together to look at.

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%;
 }

解决方案

You're being bitten by a quirk of the CSS specification: thanks to section 14.2, any background image you apply to the body element becomes the background to html instead. (This was intended so that authors could carry on using background on the body tag where they expected it to be from pre-CSS browsers.)

In IE, html represents the whole document canvas and expands to fit the enlarged body width. In other browsers it acts like any other display: block element and keeps the viewport width regardless of what you put in it. The other browsers are arguably more correct here, but the CSS spec is not terribly clear on the topic, and the upshot is that the results in IE more closely represent the wording of 14.2 about the canvas. Either way, it's not really specified reliable behaviour.

You can get consistent results across browsers by setting the width and background on html instead of body. (Remember to use Standards Mode in IE.)

But a 1400px fixed-width document? Sounds like a really bad idea.

这篇关于Firefox背景图像水平居中奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！