Question

（仅适用于手机设备：android，ios）

我不太确定这里发生了什么，但我确实知道顶部的background-color并未跨越整个div长度。页脚附近的background-images也不是中间的中心。我已经尝试了许多不同的方法来解决这个问题，但它看起来像顶部背景颜色问题和页脚背景图像问题是相关的，因为它们都有类似的“切断”点。

两个元素共享相似的代码。父div，绝对定位为居中的内部div。任何见解都会很棒。

网站为here。

更新：我尝试在此处复制jsFiddle上的问题（提醒：使用移动浏览器）：http://jsfiddle.net/zmwgg279/2/

Answer 1

您的问题是您为包装器元素指定了冲突的width。

这里是 Fiddle

您的第一个元素#seascape-infobar有一个width 100%，非常适合自适应布局。它破坏的地方是你强迫子元素可能比它显示的屏幕更宽。这是代码的简化版本：

<强> HTML

<div id="seascape-infobar">
    <div class="wrap"></div>
</div>

<强> CSS

#seascape-infobar {
    width: 100%;
}
#seascape-infobar .wrap {
    margin: 0 auto;
    width: 980px; /* What happens when this is wider than the screen? Break! */
}

当您在屏幕宽度低于而不是980px的手机上查看时，父包装#seascape-infobar仍会正确适合屏幕宽度，但< em> child 元素.wrap将被强制溢出到980px。

这里最安全的做法是确保使用%或ems等相对单位指定所有宽度。这允许内容干净地调整到查看它的显示器。

背景颜色/图像不覆盖移动设备上div的宽度

1 个答案: