firefox 容器框的 padding-right 问题答案

【问题标题】：firefox issue with the padding-right of the container boxfirefox 容器框的 padding-right 问题
【发布时间】：2011-04-16 03:32:23
【问题描述】：

有一个指定了背景颜色和填充的容器。里面有一个图像。在全屏浏览器窗口中，它看起来应该是这样的： 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;” （以及正确的文档类型和所有内容......）所以我真的不知道我该怎么做。我通常用图像的边距来做，但这次不能解决（实际情况与这个例子不同，但它显示了确切的问题）。

提前感谢您的帮助:)

【问题讨论】：

标签： firefox background padding css

【解决方案1】：

添加一个额外的 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>

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

【讨论】：

+1。试过这个，它奏效了。实际上，我摆脱了外部 div 并且它仍然有效。浮动一个 div 就足够了。有道理 - float 使元素的大小独立于它的父元素。但我从来没有想过这样做。
是的，width: 100% 和 float: left 解决了问题:) 谢谢

【解决方案2】：

发生的情况是 div 没有展开以环绕图像，因为图像具有固定宽度，但 div 没有（因此默认为 100% 的父级，即 body/ html 在视口的 100% 处）。如果您使用 Firebug 查看它，您会发现图像超出了 div 及其填充的边界。

我已经调整了 jsFiddle 中的 CSS 以使背景扩展到图像。它至少应该让你开始。基本上，我所做的就是将overflow-y: auto; 添加到 div 中，从而扩展了背景。

【讨论】：

感谢您的回答，但正如我所见，它无法解决 Firefox 中的问题，因为该浏览器仍然存在错误：S（在默认图像视图中存在相同的问题：在左上角- 底部可以看到默认的 8px 内边距，但在右侧，什么都没有……）

【解决方案3】：

在这种情况下你可以做的一件事是在 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 放在图像上而不是 padding: 32px 放在 div 上，但是当我尝试它时也没有帮助。离奇。

【讨论】：

overflow-y 是一个有效的 CSS3 属性，滚动是一个有效的溢出选项。不过，它对body 是否有任何好处是另一回事（我很确定它没有，因为该级别的溢出通常会激活浏览器的滚动条）。
@Shauna - 你是对的。我忘记了 scroll 作为值，因为我从不使用除 auto 和 hidden 之外的任何东西。我已经从我的回答中删除了不准确的信息。
我知道这是怎么回事。我一般使用auto，hidden，偶尔使用visible，我自己。
我使用了overflow-y:scroll来显示一个永久的垂直滚动条（以防内容比窗口短。）