为什么我的页脚和容器div在iPhone Safari中不对齐？

Question

我的页脚和其他容器div在iPhone Safari中似乎没有对齐（在Android上看起来不错）：

到目前为止，没有任何工作。可能是什么原因？

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;
}

直播网站：

http://www.pixelmatic.com/index-2/

Answer 1

您还没有真正为内容部分定义明确的包装器，这使得更难以使所有内容对齐。如果你想将它移动一点，你可以在左页脚元素上加一些左边距，因为它在屏幕边缘看起来不太好。

无论如何，带有引号的部分（图像中的顶部粉红色箭头）向右移动4px，因为latest-news div上的左边距为4px。通过缩小桌面浏览器，你会看到同样的事情。

Answer 2

首先，我认为android和ios浏览器之间的差异将解释浏览器之间的差异。移动浏览器使用缩放功能使网站适合设备屏幕。资料来源：http://davidwalsh.name/zoom-mobile-browsers

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

我认为最好更改它，以便删除浏览器缩放。

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

第二：有一个额外的css规则覆盖你的.container：

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

也许css规则被迫适合屏幕。 .container包含浮动元素。 De #content .container使用overflow：hidden，但＃home-feed和#footer .containers没有这个声明。溢出：隐藏将强制父div到＆＃34;看＆＃34;里面有内容。有一些缺点，但也许它会起作用。

额外提示：为什么不使用带有Twitterbootstrap，Foundation或Groundwork等网格系统的css框架？