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和所有内容...),它也不是,所以我真的不知道我应该怎么办。我通常用图像的边距来完成此操作,但这一次不能解决(实际情况与本示例不同,但是它显示了确切的问题)。 谢谢你的帮助:)     
已邀请:
添加一个额外的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子     

要回复问题请先登录注册