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的宽度，altought为其父div，＃presentation设置为100％，只有其子div的宽度为980px。 （没有合理的理由将我的背景图像设置为980px）

这似乎只在FF中。 Chrome，IE等显示我的背景图像没有任何问题，它不会削减任何东西。

我试过：宽度：100％，高度：100％，最小宽度，最小高度到#presentation div，＃presentation div.bg，overflow：hidden，html＆gt; #presentation，在#presentation之后清除div或者它是内在的孩子。

到目前为止，我在互联网上找到的大部分内容都是。

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

Answer 1

我认为这可能是由于重复了bg图像

这就是它应该是这样的方式：

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

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

根据您拥有的bg图片类型，您可能希望使用repeat-x代替no-repeat

---

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