0

我的页脚和其他容器 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/

4

2 回答 2

1

您还没有真正为您的内容部分定义清晰的包装器，这使得让所有内容对齐变得有点困难。如果您想将其移动一点，您可以在左页脚元素上放置一些左填充，因为它在屏幕边缘看起来不太好。

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

于 2013-05-27T08:55:37.500 回答
1

首先，我认为这是 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 使用溢出：隐藏，但#home-feed 和#footer .containers 没有此声明。溢出：隐藏将强制父 div“看到”里面有内容。有一些缺点，但也许它会解决问题。

额外提示：为什么不使用带有网格系统（如 Twitterbootstrap、Foundation 或 Groundwork）的 CSS 框架？

于 2013-05-27T08:59:02.207 回答