YMMV！

Question

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

左上方的徽标只是普通的不会出现
右上角的搜索框太远了
标题为“非营利组织的资源”标题中的红色标语太大，太低，超出右边界
三个导航菜单项的字体（Explore the Commons，Volunteer，Invest）太大

至少在主页上，其他一切似乎都没问题。奇怪的是，上面的所有四个问题都出现在标题中。

非常感谢任何帮助！谢谢！

Answer 1

我明白了：

左上角的徽标

徽标未显示是由于一个奇怪的非级联问题。徽标是<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;添加到最后一个样式表会神奇地显示徽标。然后我还必须使用margin s，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;
}

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

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

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

1 个答案:

YMMV！