Firefox的问题在于容器盒的填充右。

| 有一个指定了背景颜色和填充的容器。里面有一张图片。在全屏浏览器窗口中，看起来应该像这样： http://img263.imageshack.us/img263/4792/61536769.png 但是在调整窗口大小（窗口宽度小于内容宽度）后，出现水平滚动条，如果我向右滚动，我可以看到背景在窗口结束处结束： http://img845.imageshack.us/img845/7370/11506448.png 这是代码：

<body style=\"margin: 0; padding: 0; overflow-y: scroll;\">
<div style=\"background: pink; padding: 32px; display: block;\">
<img src=\"http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg\" style=\"width: 640px;\" />
</div>
</body>

在ie8中，看起来正确，将填充视为其内容的一部分。在firefox和Opera中，即使我使用\“-moz-box-sizing：border-box; \”（以及正确的doctype和所有内容...），它也不是，所以我真的不知道我应该怎么办。我通常用图像的边距来完成此操作，但这一次不能解决（实际情况与本示例不同，但是它显示了确切的问题）。谢谢你的帮助:)

已邀请:

3 个回复

莽缓逢

添加一个额外的div来包装现有的div并进行float：left。

<body style=\"margin: 0; padding: 0; overflow-y: scroll;\">

<div style=\"background-color: pink; width:100%;float:left;\">
<div style=\"background: pink; padding: 32px; float:left;\">
<img src=\"http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg\" style=\"width: 640px;\" />
</div>
</div>

</body>

编辑：删除显示：块；因为这与浮动时无关紧要。

芦歉竭皑

发生的情况是div不会扩展以环绕图像，因为图像具有固定的宽度，但是div不会（因此默认为父级的100％，即body / html位于视口的100％）。如果使用Firebug进行查看，则可以看到图像超出了div及其填充的边界。我已经在此jsFiddle中调整了CSS，以将背景扩展到图像。它至少应该让您入门。基本上，我所做的就是在div中添加overflow-y: auto;，从而扩大了背景。

味芯憨

在这种情况下，您可以做的一件事就是在div上也设置一个特定的宽度：

<body style=\"margin: 0; padding: 0;\">
<div style=\"background: pink; padding: 32px; display: block; width: 640px;\">
<img src=\"http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg\" style=\"width: 640px;\" />
</div>
</body>

在这种情况下，您可以这样做，因为您已经知道内容的宽度。当然，如果您需要一个动态大小的div，那么这可能对您不起作用。我本来建议在图像上放置margin: 32px而不是div上的padding: 32px，但是当我尝试该操作时也没有帮助。 izz子

要回复问题请先登录或注册

Firefox的问题在于容器盒的填充右。

3 个回复

发起人

css

firefox

background

padding

问题状态

Firefox的问题在于容器盒的填充右。

与内容相关的链接

3 个回复

发起人

css

firefox

background

padding

问题状态