背景仅与视口一样宽

Question

恼人的问题

当我放大我的视口窗口(在firefox,chrome中),然后水平向右滚动时,我的背景图像被剪裁

图像最能描绘出正在发生的事情:

放大

- 图像仅与视口一样宽

缩小输出 - 问题不会发生

以下是我的css中可能相关的部分内容:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{ width: 100%; }
header#header { width: 100%; }
header#header #background-image {
  height: 150px;
  background: url(/images/header/silhouette.png) repeat-x;
} 

无论是否应用cssgradients都会发生这种情况 - 真的难倒在这里

Answer 1

解决这个问题的方法是在body上设置min-width:

body{ width:100%;min-width: 1002px; }

这解决了我所拥有的所有浏览器以及iphone的问题(根据iphonetester,虽然我意识到现在最好添加一些媒体查询以真正为手持设备用户提供最佳解决方案