【问题标题】：positioning and font size issues on iPhone SafariiPhone Safari 上的定位和字体大小问题
【发布时间】：2011-10-22 11:20:34
【问题描述】：

我正在尝试使这个网站：http://501commons.org 在 iPhone 上呈现与在其他浏览器上相同的效果。在 Android 上它工作得很好。我已经将-webkit-text-size-adjust: 100%; 添加到body style 中，这有点帮助。以下部分仍然无法正常工作，我无法弄清楚为什么移动 safari 无法正确显示它们：

简单的左上角徽标不会显示
右上角的搜索框离左边太远了
标题“A Resource for Nonprofits etc”中的红色标语太大、太低，超出右边界
三个导航菜单项（Explore the Commons、Volunteer、Invest）的字体太大

其他一切似乎都还可以，至少在主页上是这样。奇怪的是，上面的四个问题都出现在了header中。

任何帮助将不胜感激！谢谢！

【问题讨论】：

标签： iphone css browser mobile-safari

【解决方案1】：

我想通了：

左上角标志

徽标未显示是由于一个奇怪的非级联问题。徽标是<a id="portal-logo" ...> 内的<img> 选项卡。 #portal-logo 在倒数第二个样式表中有一个 display: inline-block; 规则适用于它，但不是在最后一个。换句话说，这就是我们所拥有的：

#portal-logo {       /* in the last CSS file */
   margin-bottom: 0;
}

#portal-logo {      /* in the next-to-last CSS file */
   display: inline-block;
   margin: 1.375em 0;
}

将display: inline-block; 添加到最后一个样式表会神奇地使徽标出现。然后我还不得不摆弄margins、position、top 等以使其出现在正确的位置，但所有这些都在一个 CSS 文件中，只有在移动浏览器上有条件地加载，所以没关系.真是奇怪，iOS 上的 Safari 没有级联 display: inline-block; 样式！

搜索框

我通过将text-align:right; 添加到其容器中，使搜索框呈现在适当的位置，尽管先前使用text-align:left; 的同一容器的规则使其在所有其他浏览器中都可以正常工作。

口号

口号需要最多的调整。它包含在<div id="slogan"> 中。这是旧规则：

#slogan {
  color: #EE3524;
  float: right;
  font-size: 110%;
  font-weight: bold;
  margin-right: -190px;
  padding-top: 60px;
  position: relative;
  z-index: 1;
}

以下是适用于移动 Safari 的新规则：

#slogan {
  -webkit-text-size-adjust: 100%;
  clear:right;
  color:#ee3524;
  font-size:17.6px;
  font-weight: bold;
  float:right;
  margin-right:0px;
  padding-bottom:50px;
  padding-top:0px;
  position:relative;
  text-align:right;
  z-index:1;
}

其中一个主要区别是绝对 font-size 以 px 为单位，而不是 % 值。

菜单项字体

同样，在 px 中指定 font-size 而不是 % 似乎是这里的关键：

旧：

#portal-globalnav li a {
  background-color: transparent;
  color: #FFFFFF;
  font-size: 1.2em;
  font-weight: bold;
  min-width: 3em;
  padding-bottom: 11px;
}

新：

#portal-globalnav li a {
  background-color:transparent;
  color:#fff;
  font-size:15.4px;
  font-weight:bold;
  padding-bottom:11px;
  min-width:3em;
}

YMMV！

【讨论】：