Box div 不会扩展到 100% 宽度，而是扩展到内部 div 子级的宽度

Question

我似乎只在 Firefox 3.0、Firefox 3.6 中出现以下 CSS 问题。使用较新版本的 Firefox（例如 3.6.6），我的布局工作正常。

不幸的是，我无法上传完整的屏幕截图。代码如下：

#header { width:100%; }
#header div.container { width:980px; margin:0 auto; }
#presentation { width:100%; background:red; }
#presentation div.bg { background-image:url(../images/img.png) no-repeat center top; }
#presentation div.container { width:980px; margin:0 auto; }

<div id="presentation">
<div class="bg">
<div class="container">
[content here]
</div><!-- end .container -->
</div><!-- end .bg -->
</div><!-- end #presentation -->

FF3.0 将 div.bg 中找到的背景图像剪切为 div.container 的宽度，尽管其父 div、#presentation 设置为 100%，并且只有其子 div 的宽度为 980px。 （没有逻辑原因为什么我的背景图像设置为 980px）

这似乎只在 FF 中。 Chrome、IE 等可以毫无问题地显示我的背景图像，并且不会剪切任何内容。

我尝试过： #presentation div、#presentation div.bg、overflow:hidden、html > 的 width:100%、height:100%、min-width、min-height #presentation，清除 #presentation 之后的 div 或其内部子元素。

到目前为止，我几乎可以在互联网上找到所有内容。

我的 HTML 文档主要使用 XHTML Strict 进行验证，除了一些我需要犯的错误（UL 内的 div） - 不在 #presentation div 内的错误。

Answer 1

我认为这可能是由于背景图像的重复，

顺便说一句，这应该是这样的：

#presentation div.bg { width: 980px; background:url("img.jpg") no-repeat top center; }

也许背景不够大，留下了一些空白空间？

根据您拥有的背景图像类型，您可能需要使用 repeat-x 而不是 no-repeat

---

顺便说一句.. 拥有宽度和宽度是一件好事具有 css 背景图像的 div 的高度属性，如果不是高度，则至少是宽度。在某些情况下，如果没有设置宽度，则使浏览器窗口小于包装器可能会导致背景图像被剪切，但这里不应该出现这种情况。