iPhone Safari 上的定位和字体大小问题

Question

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

• 左上角的徽标不会显示出来，
• 右上角的搜索框距离搜索框太远了 标题中左侧
• 的红色标语“非营利组织资源等”太大、太低，并且超出了右边框
• 三个导航菜单项（探索公共资源、志愿者、投资）的字体太大

其他一切似乎好吧，至少在主页上是这样。奇怪的是，上述四个问题都出现在 header 中。

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

Answer 1

我发现：

左上角徽标

徽标未显示是由于奇怪的非级联问题。徽标是 内的 选项卡。 #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; 使搜索框呈现在正确的位置，尽管早期针对同一容器的规则为 < code>text-align:left; 使其在其他所有浏览器中都能正常工作。

口号

口号需要最多的调整。它包含在

中。这是旧规则：

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

主要区别之一是以 px 为单位的绝对 font-size，而不是百分比值。

菜单项字体

同样，以 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！