Question

不守规矩网站的网址：http://chrism.se

在我们实现之后，我们发现如果视口对于内容来说太小，以至于需要滚动，那么背景图像（body-tag，repeat-x）将不会超出初始视图，但是我不能为我的生活弄清楚为什么以及如何解决它。需要记住的一点是，我没有自己对网站进行编码，因为我不是那个精通Javascript的设计师，而且设计师想要一些swooshy效果。我的高级同事当然可以找到一个补救措施，但不幸的是他离开了，我想把它包起来。

html和css的状态与我发现问题时的情况相同，但我已经尝试过我在类似问题上看到的建议，主要围绕最小宽度。我真的不明白background is only as wide as viewport之间的区别吗？和我的问题？

全视图= i.imgur.com/6aDpN.jpg

问题= i.imgur.com/X6JVp.jpg

Answer 1

IE不支持min-width，因此您可以使用表达式执行相同操作：

body {
    /* fix for most browsers, fill in desired width */
    min-width: 1000;

    /* IE Version, fill in desired width equal to the min-width, second value with 2px less */
    width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}

Answer 2

我能找到的最接近工作解决方案的是来自#bodyCurrent, #bodyNext：

删除right: 0。
添加min-width: 1349px。

再看一遍，也许这已经足够了。

仅使用Firebug在Firefox中测试。

Answer 3

我意识到我迟到了，但我遇到了同样的问题，并在身体上添加了一个最小宽度来解决这个问题。由于您提供的链接仍有此问题，我假设您可能需要更多建议。当出现水平滚动条时，主体的最小宽度应至少与视口一样宽。

如果您使视口足够小以用于滚动条并使用Firefox的3D视图来查看页面，则更容易看到发生了什么。然后你会看到你的区域页脚设置为采用100％宽度的body元素并且背景正常;然而，身体本身比页面顶部的溢出小，所以当你滚动时，你会得到那个截止的区域。因此，使body元素的最小宽度与页面顶部的溢出一样大，您将全部设置。这是一个非常常见的问题（我甚至在mailchimp上注意了一段时间）。

Answer 4

将其添加到div#wrapper：

的背景中

background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;

Answer 5

在IE7中测试过：

html, body {
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}

背景图像被切断超出视口

5 个答案: