为什么我的页脚和容器div在iphonesafari中没有对齐？

我的页脚和其他容器分区在iPhone Safari中似乎没有对齐（在Android上看起来还行）：

到目前为止，一切都不起作用。原因可能是什么

CSS:

现场直播：

---

您还没有真正为内容部分定义清晰的包装，这使得要使所有内容保持一致有点困难。如果你想移动它一点，你可以在左脚元素上加上一些左边的填充物，因为它在屏幕边缘上看起来不太好

---

无论如何，带引号的部分（图像中顶部的粉红色箭头）由于最新新闻的左边距为4px，所以向右移动了4px。通过缩小桌面浏览器，您将看到同样的情况。

首先，我认为android和ios浏览器之间的差异将解释浏览器之间的差异。移动浏览器使用缩放使网站适合设备屏幕。资料来源：

也许css规则是被迫适应屏幕的。 .container包含浮动元素。De#content.container使用溢出：hidden，但#home feed和#footer.containers没有此声明。overflow:hidden将强制父div“查看”其中是否有内容。有一些缺点，但也许它会奏效

额外提示：为什么不使用一个具有Twitter BooTrand、基础或基础的网格系统的CSS框架？

html,
body,
#wrapper {
  height: 100%;
}

body > #wrapper {
  height: 100%;
  min-height: 100%;
}

#content {
  clear: both;
  padding-bottom: 36px;
}

#header,
#content,
#footer {
  padding-left: 20px;
  padding-right: 20px;
}

.container {
  margin: 0 auto;
  width: 960px;
}

#footer {
  background: url(images/footer_bg.png) repeat-x 0 0;
  margin: -65px 0 0;
  padding: 15px 0 14px;
  position: relative;
  clear: both;
  height: 36px;
}

<meta name="viewport" content="user-scalable = yes">

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">

.page-template-front-page-2-php .container {
width: 971px !important;
}