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

Question

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

• 左上角的 Logo 不会显示
• 右上角的搜索框太靠左了
• 标题“A Resource for Nonprofits etc”中的红色标语太大、太低，并且超出了右边界
• 三个导航菜单项(Explore the Commons、Volunteer、Invest)的字体太大

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

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

Answer 1

我想通了:

左上角的标志

Logo 未显示是由于一个奇怪的非级联问题。 Logo 是 <img> <a id="portal-logo" ...> 内的选项卡. #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;最后一个样式表神奇地使 Logo 出现。然后我还不得不摆弄 margin小号，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 为单位，而不是 % 值。

菜单项字体

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

旧的:

#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!