6

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

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

html 和 css 的状态与我发现该问题时的状态相同，但我尝试了在类似问题上看到的建议，主要围绕 min-width。我真的不明白背景之间的区别仅与视口一样宽吗？我的问题？

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

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

4

5 回答 5

2

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" );
}
于 2011-05-31T15:57:19.617 回答
1

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

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

再看一遍，也许就够了。

仅在 Firefox 中测试，使用 Firebug。

于 2011-01-24T14:25:55.027 回答
1

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

如果您将视口设置为足够小以容纳滚动条并使用 Firefox 的 3D 视图来查看页面，则更容易看到正在发生的事情。然后你会看到你的 region-footer 设置为 body 元素的 100% 宽度，并且背景工作正常；但是，主体本身比页面顶部的溢出要小，因此当您滚动时，您会看到截断的区域。因此，使 body 元素的最小宽度与页面顶部的溢出一样大，您将全部设置好。这是一个很常见的问题（我什至在 mailchimp 上注意到了一段时间）。

于 2012-05-18T15:42:46.643 回答
0

将此添加到的背景div#wrapper：

background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
于 2011-01-24T13:32:23.267 回答
0

在 IE7 中测试：

html, body {
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
于 2012-06-26T13:08:31.483 回答