0

我似乎只在 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。（我的背景图片设置为 980 像素没有逻辑上的原因）

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

我试过：宽度：100％，高度：100％，最小宽度，最小高度到#presentation div，#presentation div.bg，溢出：隐藏，html > #presentation，在#presentation之后清除div或是内心的孩子。

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

我的 HTML 文档主要使用 XHTML Strict 进行验证，除了一些我需要犯的错误（UL 中的 div）——#presentation div 中没有的错误。

4

1 回答 1

0

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

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

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

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

根据您拥有的 bg 图像类型，您可能希望使用repeat-x而不是no-repeat

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

于 2011-07-24T09:22:34.947 回答