我想让这个网站：http://501commons.org在iPhone上与其他浏览器上的相同。在Android上，它工作得很好。我已经将-webkit-text-size-adjust: 100%;添加到了身体风格，这对此有所帮助。什么是仍然没有工作有以下几件，我想不通为什么移动Safari浏览器不能正常显示它们：iPhone Safari上的定位和字体大小问题

左上角的标志只是普通不会出现
在搜索框中右上方距离太远
标题为“非营利资源等的资源”中的红色口号太大，太低，并超出右边框
三个导航菜单项的字体（探索下议院，志愿者，投资）太大

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

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

来源

2011-09-28 fulv

我想通了：

左上标志

标志没有显示出来，到一个陌生的非级联的问题所致。徽标是<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;最后一个样式表使神奇的标志出现。然后，我还不得不拨弄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; 
}

这里是新规则能在移动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，而不是作为一个百分比值。

菜单项字体

同样，指定在像素代替％的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！

来源

2011-10-22 03:20:34 fulv

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

回答

YMMV！

相关问题